3 Steps to setup SharePoint Framework Development Environment

Hi Friends,

In this blog I will tell you 3 easy steps to setup the SharePoint Framework development. Setting up SharePoint Framework development environment requires different commands to be executed so your machine can have all the required setups.




Step 1: Install Node.js

To install Node.js download the installer from the below link and install. You do not need to change any configuration on the multiple screens just hit 'Next' Button and you are done.

Link to Node.js setup: https://nodejs.org/en/

NOTE: Do not forget to re-start the machine otherwise it won't be able to recognize the commands in the below steps

Role of Node.js in the SharePoint Environment setup

  • Node.js is the most important part in the SharePoint Framework environment.
  • It acts as a local server to compile, build and run the SharePoint environment locally.
  • Having server locally makes the development much faster and easier.
  • This means if your SharePoint App is not accessing SharePoint assets than you can develop it locally without even having SharePoint tenant/access.


Step 2: Install Visual Studio Code


To install Visual Studio Code  click on the link below and install. You can change the configuration of the installer and select all the check boxes.

Link to Visual Studio Code Setup:  https://code.visualstudio.com/

Role of the Visual Code in the SharePoint Framework Setup

  • Visual studio code is the IDE provided by Microsoft that supports multiple programming languages
  • Visual studio code is very light and fast in compared to the Visual Studio
  • There are other products as well like Atom etc.. you can use any of them but I prefer to use visual studio code.

Step 3: Install required NPM packages


There are 3 NPM packages that needs to be installed in order to complete the setup. NPM packages are basically hosted JavaScript files that are created for the specific purpose. Similarly below packages have their own purpose
  • SharePoint Generator: SharePoint Generator helps in creating the SharePoint project template. This templates contains the best practice and defaults of the files.
  • Gulp: It is responsible for the execution of tasks in order to complete some specific operations. In this case it is responsible for the build, compile and execute the SharePoint project.
  • Yeoman: Yeoman itself is a collection of three tools: Yo, Grunt and Bower. Combined together these tools provide everything a developer needs to get started on a project. Yo is a tool used to scaffold a new application. It can create common project assets like style sheets, JavaScript files etc..

To install the above NPM packages run the below command

  • Open the Node.js command prompt (click start and in search type node.js)
  • Execute the below commands

        npm i -g @microsoft/generator-sharepoint
       npm i -g yo
       npm i -g gulp

After the execution of the above commands setup is completed and now you can start creating your SharePoint Framework project.


Happy Coding
- Sumit Kanchan.

Comments

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart

SharePoint Image Gallery