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. To know details about fundamental of SharePoint Framework, refer to Introduction to SharePoint Framework.
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
Node.js is an asynchronous event driven JavaScript runtime, helps to build scalable network applications. It is a cross-platform runtime environment for hosting and serving JavaScript code. The Node.js ecosystem is tightly coupled with npm and task runners(gulp) to provide an efficient environment for building JavaScript-based applications.
As the first step, it is suggested to install NodeJS Long Term Support Version (LTS) which sets up the development environment and adds NPM. To install Node JS, can download from here.
You can check if you have node.js installed previously by using npm -v command in your Windows PowerShell tool.
Install Yeoman
Yeoman is a client-side development stack consisting of tools which help to combine several functions in one place. It helps you kick-start new projects, prescribes best practices required tool-chain components and pulling in relevant build tasks and package manager dependencies for the specified client-side project. Yeoman creates the minimal project structure for the project.
To install Yeoman run this following command in nodejs command line
npm install -g yo
It is a good idea to check that everything is installed as expected by running commonly used Yeoman command
yo -–version
Install Gulp
Gulp is a task runner which is used in SPFx as the build process task runner. It helps to automate common tasks like refreshing browser to save a file, bundling libraries, Copying modified files to the output directory etc.
To install Gulp run this following command in nodejs command line
npm install –global gulp-cli
After installation, you can get the gulp version by using the following command
gulp -v
Install Yeoman SharePoint Generator
The Yeoman SharePoint Generator is a Yeoman Plugin which helps to create SharePoint Framework client side project with the right tool chain and project structure.
SharePoint Generator can be installed using the below command
npm install -g @microsoft/generator-sharepoint@latest
To check the version of Yeoman Generator, need to run the following command line.
npm view @microsoft/generator-sharepoint version
Code Editor
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.
Summary
Here I tried to accommodate the process of setting up the development environment for SPFx in windows operating system. Hope it will help and happy coding.