What are steps to configure SharePoint framework?

Ans:- 

Step 1  - Download and Install Node JS LTS Version 10

Step 2 - Installing Visual Studio Code 

 

We can use any code editor to develop SPFx solution but mostly it's used in Visual Studio code. Download Visual Studio code stable version from the below link.

 

https://code.visualstudio.com/ - 

Step 3 - Install Yeoman and Gulp

 

• These are Node JS based tools which help in creating, building, and debugging SPFx solutions.
• Go to Node JS command prompt
• Enter the below command

npm install -g yo gulp  

• It will download yeoman and gulp packages, we are using -g parameter so that it would be installed globally across your Node JS environment.

Step 4 - Install SharePoint Yeoman generator.

• Next, we will install the SharePoint Yoeman generator which will help in creating the SPFx solution project structure.
• Run the below command in Node JS command prompt.

npm install -g @microsoft/generator-sharepoint  

Step 5 - Trusting self-signed Developer certificate

SharePoint local server to test web parts uses HTTPS. This is developed using a self-signed developer certificate. So we need to trust the self-signed developer certificate for our development environment.

This needs to be done only once, but it would need to run on SPFx project root folder. So you can do this once we create our first Hello world client-side web part

• Run the below command in Node JS command prompt.

gulp trust-dev-cert   

Step 6 - Create Hello World Web part

 

• Go to Node JS command prompt, go to the required path where you wanted to create the SPFx project.
• Use 'md helloworld-webpart' command to create a directory and go to that directory using 'cd helloworld-webpart'
• Once in your folder, use below command to create a new SPFx project
• yo @microsoft/sharepoint  
• It will take you to some questions one by one to create a required project based on your requirements.
• Now let's run 'gulp trust-dev-cert', you will be asked to install a certificate. Click yes

Step 7 - Preview web part in local workbench.

 

• Run the below command.

gulp serve  

• It should open local workbench like below, click on Add icon and add Hello world web part to the page.