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.

Video tutorial: SharePoint Framework Development Environment Setup

Prerequisites for SharePoint Framework Setup for Windows 10

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

setup spfx development environment
NodeJs 8.11.4 LTS 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.

sharepoint framework development environment setup
NodeJS & NPM Version

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

sharepoint framework tutorial step by step
Installing 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

spfx environment setup
Installing Yomen packages for SPFx

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

spfx development environment setup
spfx environment setup

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!

sharepoint framework local workbench
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.

spfx local workbench not working
sharepoint framework local workbench is working as expected.

You may like the following SharePoint framework tutorials:

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