SharePoint Framework - Setting Up Development Environment

Gulp is a JavaScript task runner that helps us automate common tasks like refreshing your browser when you save a file, Bundling and minifying libraries and CSS, Copying modified files to an output directory etc. We will be using Yo and Gulp together for creating SharePoint Client Webparts.

Now, let’s install Yeoman and Gulp simultaneously by running the below command:

npm install -g yo gulp

We can get the version of Yeoman using the command:

yo --version

We can get the Gulp Version using the command:

gulp –v

Install Yeoman SharePoint Generator

The Yeoman SharePoint web part generator helps you to quickly create a SharePoint client-side solution project with the right tool chain and project structure.

Yeoman SharePoint Generator can be installed using the below command:

npm install -g @microsoft/generator-sharepoint@latest

We can get the version of Yeoman Generator by running the below command. As we can see 1.0.0 indicates General Availability version.

npm view @microsoft/generator-sharepoint version

Code Editor

Next, we need a code editor that will help us with code editing. We can use any code editor or IDE that supports client-side development to build our web part, such as:

• Visual Studio Code
• Atom
• Webstorm

We will use Visual Studio Code in this walkthrough. You can get it from here.

Once we have downloaded the exe, proceed with the installation.

Click on Install to start the installation procedure.

Finally, we have completed installation of the Visual Studio Code editor.

Sample Screen Shot,

Additional Tools for Development and Debugging

Once we start the development, we will have to debug or test the application. Fiddler and Postman can help us in this task.

Fiddler

Fiddler is an HTTP debugging proxy server application. It captures HTTP and HTTPS traffic and logs it for the user to review. You can get fiddler from here

Once the executable has been downloaded. Click on Install to set up Fiddler in your local machine.

Using fiddler, we can examine the traffic as it is being sent or received.

Postman

Postman can be used to test SharePoint’s REST service endpoints and verify the returned data and request headers. We can get Postman from here

Postman can be added to Chrome as an app.

The REST url can be entered in the Request URL field and we can click on Send to get the SharePoint data.

Summary

Thus, we saw how to set up the environment to get started with the new SharePoint Framework development model.