Setup SharePoint Framework (SPFx) development environment in Windows 10 workstation

As well all know that SharePoint Framework (SPFx) has completed 1.5 years in the market and now it is known for client-side coding. In these solutions we use scripting. So, in this SharePoint framework tutorial (SPFx), I would like to walk you through the steps to configure and prerequisites to implement or develop SPFx web parts.

Since SPFx is client side scripting we can implement these web parts from any non-SharePoint environment. Now we will learn how to configure a Windows 10 environment to create SPFx webpart.

• Create a Hello World WebPart in SharePoint using SPFX

Video tutorial: SharePoint Framework Development Environment Setup

Prerequisites for SharePoint Framework Setup for Windows 10

• Must be the administrator on the laptop/desktop
• NodeJs 8.11.4 version https://nodejs.org/dist/latest-v8.x/
• Any code editor tools like EditPlus, notepad ++, Visual studio code or notepad
  1. Visual Studio code https://code.visualstudio.com/
  2. Note pad++ https://notepad-plus-plus.org/download
  3. EditPlus https://www.editplus.com/download.html
• Minimal knowledge in Powershell

Once you get to download all the above-required software install the Node JS first. As soon as we install we need to install the other components like Yeoman and Gulp. Run the below Power Shell command to complete.

Note: NodeJS latest 8.11.4 LTS (Long Term Support) version for sharepoint

Installing Node JS 10.15 LTS

Once you install the NodeJS ensure that you have only one latest version with the below PowerShell command.

Installing Visual Studio Code Editor

Now that we installed the Node JS and visual studio code editors, open PowerShell and run the below command to install the import NPM packages YO and GULP.

npm install -g yo gulp

Install SharePoint Generator for SPFx

Now that we installed Yeomon and Gulp we need to install the Yeoman SharePoint generator. Execute the below command to install it.

npm install -g @microsoft/generator-sharepoint

That’s it we are good to start SPFx development.

SharePoint framework Local Workbench is showing empty

Let us see, how to solve spfx local workbench not working or spfx local workbench not loading or SharePoint framework Local Workbench is showing empty issue.

I see a blank page when I run “gulp serve” in the SharePoint framework local workbench!

This is expected behavior in SharePoint framework development and the possible issues would be one of the below.

• nodeJs is corrupted/installed later version than 8.11.4
• NPM is corrupted

Most of the time when you run the command “npm i” in PowerShell it will fix the issue and you can see local workbench as normal. If this doesn’t help you need to repair/reinstall nodeJs 8.11.4 RTM. In my case, I have uninstalled and reinstalled the NodeJs.

When you reinstalling the NodeJs ensure that it is successful if not you will see the same issue again.

You may like the following SharePoint framework tutorials:

• [Solved] [spfx-serve] The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/ in SharePoint Framework
• [Solved] cannot find module ‘@microsoft/sp-build-web’ SharePoint Framework (spfx)
• SPFx Application Customizer Example – An Analog Clock with React
• SPFx – Bind dropdown list from SharePoint list using PnP
• How to get user details using Microsoft Graph API in SPFx
• SharePoint online spfx script editor web part
• How to Send Email with Attachments using Graph API in SPFx (React JS)

I hope this SPFx tutorial helps to learn the SharePoint framework (spfx) development environment setup in windows 10 workstation.