• Click the "Add" button to add the permissions to your application.
• Now we have two steps to do. 1) Select an API 2) Select Permissions for that API. In our case, we need to select the "Microsoft Graph" API and in the next step, we will give permissions related to this API. 
  
• Currently, I am giving "Read and write files in all site collections" permission only.  We will add more permissions later. 
  
• Don't forget to click the "Done" button after adding permissions.
• It's a time to generate Private Key for our application. Go Back to the "Settings" navigation pane. Then click "Keys". Fill the description of the key and then select expires duration. Then click the "Save" button. It will provide us a private key. Copy the key value and store it in a secure place. You won't be able to retrieve the same key after. 
  

String clientId = 'my application id'; 
String clientSecret = 'my private key';
String tenantId = 'my tenant id';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setMethod('POST');
req.setHeader('Content-Type', 'application/x-www-form-urlencoded');
//https://login.microsoftonline.com/< tenant Id>/oauth2/token
req.setEndpoint('https://login.microsoftonline.com/'+EncodingUtil.urlEncode(tenantId, 'UTF-8').replaceAll('\\+', '%20')+'/oauth2/token'); 
String body = 'grant_type=client_credentials'+
    '&client_id=' + EncodingUtil.urlEncode(clientId, 'UTF-8') +
    '&client_secret='+ EncodingUtil.urlEncode(clientSecret, 'UTF-8') +
    '&resource=https://graph.microsoft.com';                              
req.setBody(body);
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());
//Parse the response and store the access_token in public variable to use it in other methods.

String access_token= 'access_token';
String driveID = 'my drive id';
String folderBody = '{"name": "New Folder","folder": { },"@microsoft.graph.conflictBehavior": "rename"}';
string endPoint = 'https://graph.microsoft.com/v1.0/drives/' + 
                        EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
                        '/root/children';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setMethod('POST');
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type', 'application/json');
req.setHeader('Accept', 'application/json');
req.setEndpoint(endPoint);
req.setBody(folderBody);
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

Upload a File

String access_token= 'access_token';
String driveID = 'my drive id';
String folderName = 'New Folder';
String fileBody = 'Hello World!';
String fileName = 'My Document.txt';
String endPoint = 'https://graph.microsoft.com/v1.0/drives/' + 
                                EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
                                '/root:/'+EncodingUtil.urlEncode(folderName, 'UTF-8').replaceAll('\\+', '%20')+'/'+
                                EncodingUtil.urlEncode(fileName, 'UTF-8').replaceAll('\\+', '%20')+':/content';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setMethod('PUT');
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type', 'text/plain');
req.setHeader('Accept', 'application/json');
req.setEndpoint(endPoint);
req.setBodyAsBlob(Blob.valueOf(fileBody));
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

String access_token= 'access_token';
String driveID = 'my drive id';
String parentFolderId = 'My parent folder id';
String fileDesc = '{"@microsoft.graph.conflictBehavior": "rename"}';
String fileName = 'largeFile.txt';
string endPoint = 'https://graph.microsoft.com/v1.0/drives/' + 
                                EncodingUtil.urlEncode(driveID, 'UTF-8').replaceAll('\\+', '%20') +
                                '/items/'+EncodingUtil.urlEncode(parentFolderId, 'UTF-8').replaceAll('\\+', '%20')+':/'+
                                EncodingUtil.urlEncode(fileName, 'UTF-8').replaceAll('\\+', '%20')+':/createUploadSession';
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer '+ access_token);
req.setHeader('Content-Type','application/json');
req.setHeader('Accept', 'application/json');
req.setMethod('POST'); 
req.setEndpoint(endPoint);
req.setBody(fileDesc);
HttpResponse res = h.send(req);
System.debug('Response Body: ' + res.getBody());

String access_token= 'access_token';
Blob file_body = Blob.valueOf('Hello World!');
String fileLength = String.valueOf(file_body.size());
String uploadUrl = 'upload URL from create an upload session';
Http h = new Http();
HttpRequest req2 = new HttpRequest();
req2.setHeader('Authorization', 'Bearer '+ access_token);
req2.setHeader('Content-Length',fileLength);
req2.setHeader('Content-Range','bytes 0-'+(Integer.ValueOf(fileLength) - 1)+'/'+fileLength);
req2.setHeader('Accept', 'application/json');
req2.setMethod('PUT');        
req2.setEndpoint(uploadUrl);
req2.setBodyAsBlob(file_body);
HttpResponse res = h.send(req2);
System.debug('Response Body: ' + res.getBody());

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. Type SFDX: Create Project.
3. Enter MyLightningWebComponent as the project name, press Enter.
4. Select a folder to store the project.
5. Click Create Project.

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. SFDX: Authorize a Dev Hub: This step is used for login our pre-release Devhub Org.
3. SFDX: Create a Default Scratch Org: We need to create new scratch org for pushing our changes from our local machine into scratch org.
4. SFDX: Create Lightning Web Component: Now we need to create new lightning web component under “lwc” folder.

1:  <template>  
2:    <lightning-card icon-name="custom:custom57">  
3:      <div slot="title">  
4:        <lightning-layout vertical-align="center">  
5:          <lightning-layout-item>  
6:            Contact Search  
7:          </lightning-layout-item>  
8:          <lightning-layout-item padding="around-small">  
9:            <c-nav-to-new-record></c-nav-to-new-record>  
10:          </lightning-layout-item>  
11:        </lightning-layout>  
12:      </div>  
13:      <div class="slds-m-around_medium">  
14:        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" 
15:           label="Search"></lightning-input>  
16:        <template if:true={contacts}>  
17:          <template for:each={contacts} for:item="contact">  
18:            <c-contact-tile key={contact.Id} contact={contact}></c-contact-tile>  
19:          </template>  
20:        </template>  
21:      </div>  
22:    </lightning-card>  
23:  </template>  

1:  lightning-input,  
2:  c-contact-tile {  
3:    position: relative;    
4:    border-radius: 4px;  
5:    display: block;  
6:    padding: 2px;  
7:  }  
8:  c-contact-tile {  
9:    margin: 1px 0;  
10:  }  
11:  lightning-input:before,  
12:  c-contact-tile:before {  
13:    color: #dddbda;  
14:    position: absolute;  
15:    top: -9px;  
16:    left: 4px;  
17:    background-color: #ffffff;  
18:    padding: 0 4px;  
19:  }  

1:  import { LightningElement, track } from 'lwc';  
2:  import findContacts from '@salesforce/apex/ContactController.findContacts';  
3:  /** The delay used when debouncing event handlers before invoking Apex. */  
4:  const DELAY = 350;  
5:  export default class ContactSearch extends LightningElement {  
6:    @track contacts;  
7:    @track error;  
8:    handleKeyChange(event) {  
9:      // Debouncing this method: Do not actually invoke the Apex call as long as this function is  
10:      // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.  
11:      window.clearTimeout(this.delayTimeout);  
12:      const searchKey = event.target.value;  
13:      // eslint-disable-next-line @lwc/lwc/no-async-operation  
14:      this.delayTimeout = setTimeout(() => {  
15:        findContacts({ searchKey })  
16:          .then(result => {  
17:            this.contacts = result;  
18:            this.error = undefined;  
19:          })  
20:          .catch(error => {  
21:            this.error = error;  
22:            this.contacts = undefined;  
23:          });  
24:      }, DELAY);  
25:    }  
26:  }  

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

1:  <template>  
2:    <lightning-layout vertical-align="center">  
3:      <lightning-layout-item>  
4:        <img src={contact.Picture__c} alt="Profile photo">  
5:      </lightning-layout-item>  
6:      <lightning-layout-item padding="around-small">  
7:        <a onclick={navigateToView}>{contact.Name}</a></p>  
8:        <p>{contact.Title}</p>  
9:        <p>  
10:          <lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>  
11:        </p>  
12:      </lightning-layout-item>  
13:    </lightning-layout>  
14:  </template>  

1:  img {  
2:    width: 60px;  
3:    height: 60px;  
4:    border-radius: 50%;  
5:  }  

1:  import { LightningElement, api } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  //import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';  
4:  export default class ContactTile extends NavigationMixin(LightningElement) {  
5:    @api contact;  
6:   // @wire(getSingleContact) contact;   
7:    navigateToView() {     
8:     this[NavigationMixin.Navigate]({  
9:      type: "standard__recordPage",  
10:        attributes: {  
11:          objectApiName: "Contact",  
12:          actionName: "view",  
13:          recordId: this.contact.Id,  
14:        },  
15:      });  
16:   }    
17:  }  

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>false</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

1:  <template>  
2:      <lightning-button label="New Contact" variant="brand" class="slds-m-around_medium" 
3:      onclick={navigateToNewContact} ></lightning-button>  
4:  </template>  

1:  import { LightningElement } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  export default class NavToNewRecord extends NavigationMixin(LightningElement) {  
4:    navigateToNewContact() {  
5:      this[NavigationMixin.Navigate]({  
6:        type: 'standard__objectPage',  
7:        attributes: {  
8:          objectApiName: 'Contact',  
9:          actionName: 'new',  
10:        },  
11:      });  
12:    }  
13:  }  

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="navToNewRecord">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

1. Type SFDX: Open Default Org.
2. Click the app launcher icon App Launcher to open the App Launcher.
3. Select the Sales app.
4. Click the gear icon Setup Gear to reveal the Setup menu, then select Edit Page.
5. Drag the contactSearch Lightning web component from the list of custom components to the top of the Page Canvas.

Deploy it to your Pre-release org:

Log in to your Pre-Release org and create an alias for it.

To deploy we have to also push further files which I’ve mentioned above

Type the following commands in VS Code terminal:

sfdx force:auth:web:login -a MyOrg

Confirm that this org is available:

sfdx force:org:list

Deploy your code to Pre-Release org

sfdx force:source:deploy -p force-app  -u MyOrg

Assign the lwc permission set to the default user:

sfdx force:user:permset:assign -n lwc -u MyOrg

Load sample data:

sfdx force:data:tree:import --plan ./data/data-plan.json -u MyOrg

Run your org  and interact with the app:

sfdx force:org:open -u MyOrg

Thanks,