SharePoint Framework development environment

Install Yeoman and gulp

npm install -g yo gulp

Install Yeoman SharePoint generator

npm install -g @microsoft/generator-sharepoint

If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command:

npm install @microsoft/generator-sharepoint --save-dev

Create a new web part project

To create a new web part project

1. Create a new project directory in your favorite location.

   md helloworld-webpart
   

2. Go to the project directory.
3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

   yo @microsoft/sharepoint
   

4. When prompted:
   • Accept the default helloworld-webpart as your solution name, and then select Enter.
   • Select SharePoint Online only (latest), and select Enter.
   • Select Use the current folder for where to place the files.
   • Select N to allow solution to be deployed to all sites immediately.
   • Select N on the question if solution contains unique permissions.
   • Select WebPart as the client-side component type to be created.
5. The next set of prompts ask for specific information about your web part:
• Accept the default HelloWorld as your web part name, and then select Enter.
• Accept the default HelloWorld description as your web part description, and then select Enter.
• Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorldweb part. This might take a few minutes.

When the scaffold is complete, you should see the following message indicating a successful scaffold.

Preview the web part

Developer certificate has to be installed ONLY once in your development environment, so you can skip this step, if you have already executed that in your environment.

gulp trust-dev-cert

Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve