SharePoint Framework is the new development model in which lots of work has been going on in the past year. It went to General Availability on Feb 23rd 2017. It is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.
In this article, we will see how to set up the environment for getting started with development using SharePoint Framework. Below are the required components that we will have to install in the environment.
- Node JS
- Yeoman and Gulp
- Yeoman SharePoint Generator
- Code Editor(Visual Studio Code/Webstorm)
- Postman and Fiddler(optional)
Install Node JS
![]()
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. We will be making use of npm along with Yeoman and Gulp to package and deploy modules.
As the first step we will install NodeJS Long Term Support Version (LTS).We can install Node JS from this link.
![]()
Once we have downloaded the LTS version, run the executable file and proceed.
![]()
Accept the license agreement and click on Next.
![]()
We will select Node.js run time installation.
![]()
Click on Install to start the installation procedure.
![]()
Finally we are done installing NodeJS.
![]()
If we run the NodeJS command prompt, we will get the message as shown below. Thus, the Node JS has been successfully installed in the local machine.
![]()
Now, let’s see the version of Node Package Manager (npm) by running the command npm –v . It is running V3 version.
![]()
Install Yeoman and Gulp
![]()
Yeoman is a scaffolding tool for modern web apps. It helps you to kick-start new projects, prescribing best practices and tools to help you stay productive. Often called Yo, it scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.
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.