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.
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.
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 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.
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.