SharePoint Framework - Setup 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. 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.