Development Environment Setup For Client Side WebPart With The SharePoint Framework

Development environment setup for client side webpart with the SharePoint Framework.

Please follow the below guidelines to set the development environment for client-side web part using SharePoint Framework.

 

To set up the environment, please install the below-mentioned required software:

• NodeJS Get it from here
• Visual Studio Code Get it from here
• Yeoman
• Gulp
• Microsoft Generator

Please install the node.js version 6.x as the current version is not stable.

 

Once the node.js installation is completed, open the Windows PowerShell and check the node and npm versions by using the below command.

 

Ensure that you have installed Node version 6.x and npm version 3.10.x to set up the environment correctly.

To install Gulp and Yeoman gulp globally, type the below command in PowerShell.

npm install -g yo gulp

To install the Microsoft generator, type the below command in PowerShell.

npm install -g @microsoft/generator-sharepoint

To check what is installed globally, enter the below command.

npm -g list --depth=0

 

To install the certificate for HTTPS within the local host, enter the below command.

gulp trust-dev-cert

To install and configure client-side web part using SharePoint Framework and yeoman generator type -

 

yo @microsoft/sharepoint

 

and follow the below instructions.   

 

 

 

Once the client-side web part solution gets completed, you will see the below message in Windows PowerShell. 

 

 

 

Finally, to run the client-side web part, type

 

gulp serve

 

It will open the client-side web part in the browser.

 

Click on the "+" sign to add a "HelloWorld" web part to the page.

 

 

 

 

 

 

 To open the client-side web part structure in Visual Studio Code, use the below command.

code