Categories:

How to setup SharePoint Framework development environment for beginners

I’m a fresher and I have been put up in the training to learn SharePoint and its development techniques. When I start learning SharePoint, I came to know SharePoint is like an Ocean, lot of things to learn.

Here is my understanding about SharePoint, it is a communication and collaboration tool which is majorly used as an Intranet tool within organization. It enables lot of ways to customize your SharePoint page.

SharePoint framework is one of the great technologies introduced by Microsoft Team. It’s a complete open source client-side development approach.

As beginner to start a career who is also a beginner to SharePoint, I feel SharePoint framework is easy to go approach to customize the SharePoint pages with your basic JavaScript/React skills.

If you are a beginner like me, here is a step by step implementation of how-to setup SharePoint Framework development environment in your machine and what issues you would face and how to resolve them.

SPFx Environment Setup

Step 1:

  • If you already installed node.js and gulp check its version using below commands

node -v

gulp -v

  • Install node.Js  LTS version  8.x or version 10.x.

https://nodejs.org/en/download/

  • SharePoint Framework currently supports node.js LTS version 8.x and node.js version 10.x
  • Versions (v9.x, v11.x, v12.x) are not currently supports SharePoint framework.

Step 2:

Step 3:

  • Install SPFx development toolchain yeoman , gulp and yeoman generator for Sharepoint. we can install all three toolchain using single line command given below

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

Step 4:

  • Use Modern web browser like Google Chrome, Firefox, Microsoft edge as development browser.

Issues I faced during the environment setup and here’s how I resolved it.

  1. When I tried to execute the command gulp trust-dev-cert. I faced an issue

                          ReferenceError: primordials is not defined.

Why?

       This error is because I used node version 12 and gulp version 3.

       This combination doesn’t work.

Solution!

  • To solve this, change the node version to node v8 or node v10 and upgrade gulp version 4.
  • To change the node version, uninstall the current node.js and install node v8 or node v10 using given link

https://nodejs.org/en/download/releases/

  • To change the gulp version, uninstall the current gulp using below commands

npm uninstall gulp –save-dev

npm uninstall gulp -g

  • Now we can install the gulp version 4 using below commands

                  npm install gulp-cli -g

                  npm install gulp@3.9.1 -D I hope this article was helpful to setup the SPFx development environment from the scratch as a beginner.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *