UKReddy SharePoint Journey: Set up SharePoint Framework development environment

SharePoint Framework

Microsoft SharePoint Framework is a new development model. It is built with a set of tools to build on top of Microsoft SharePoint. It provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. It works for both SharePoint on-premises and SharePoint Online.

Setup Development Environment

Now we will go through the process of setting up the development environment for SharePoint Framework in windows operating system. The process is described below.

Install Node JS

Install NodeJS Long Term Support (LTS) version from here

After installation, Open Powershell and type the below command to verify the version.

npm -v

Make sure you are running V3 version of npm.

Also run the below command to install windows build tools for SharePoint framework projects

npm install -g --production windows-build-tools

– install globally this is used to build SharePoint framework projects.

Install Yeoman

Yeoman is the modern scaffolding tool. It helps you kick-start new projects, and prescribes best practices and tools to help you stay productive.

Go to PowerShell window and type as below,

npm install -g yo

It is a good idea to check that everything is installed as expected by running commonly used Yeoman commands like below.

yo –version (2 hyphens)

Install Yeoman SharePoint Generator

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

Enter the following command to install the Yeoman SharePoint generator:

npm install -g @microsoft/generator-sharepoint

Install Gulp

Gulp is a JavaScript task runner that lets you automate tasks such as Bundling and minifying libraries and stylesheets, refreshing your browser when you save a file, quickly running unit tests, Copying modified files to an output directory etc.

Install the gulp command,

npm install –global gulp-cli

Code editor (Visual studio code):

The development environment is already ready. Now use any code editor or IDE that supports client-side development to build web part. My personal preference is Visual Studio Code. Get the setup file of Visual Studio Code from here.

Now we are good to build our first SharePoint Framework project.

Note: If you install lates node.js then check node version by using the below command.

Node -V

and its out is something like this v8.9.x then you need to set a windows environment variable because this is caused by the experimental http/2 feature that is a part of Node v8. Due to that you won't be able to open the workbench in the browser.