Run Local SharePoint Framework

SharePoint Framework (SPFx) toolchain is the set of tools that manage building and deploying your client side projects. The toolchain helps you build and test client-side web parts in your local development environment using SharePoint Workbench. SharePoint Framework consists of several npm packages (package manager for JavaScript) to help developers build client-side solutions in SharePoint.

These are the steps I took to install SPFx locally, and even though I encountered some issues, I managed to finalize the installation on my local Windows PC.

First, install NodeJS LTS version. Make sure you download the left LTS version. As I write this post the version number is v6.10.1 LTS.

If you have NodeJS already installed please check if you have the latest version using node -v. It should return the current LTS version.

Just to be clear, I used Windows PowerShell app which should be already installed on your Windows machine. Open Windows PowerShell and make sure you are under C:\ drive. If not use cd.. command to get under C:\ drive. Now type node -v to see if your NodeJS was installed properly and what version. You should get something like this: v6.10.1.

After installing node, make sure npm is up to date by running following command in the Windows PowerShell:

npm install -g npm

Next, install Yeoman and gulp
Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground web site to host web parts for testing.

Enter the following command to install Yeoman and gulp:

npm install -g yo gulp

Next, install Yeoman SharePoint generator
The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure. This is where most of the people have issues installing it locally.

Enter the following command to install the Yeoman SharePoint generator including the quotes:

npm i -g "@microsoft/generator-sharepoint"

After Yeoman SharePoint generator is installed, type: yo and hit enter.

You will be presented with few choices: Solution name, location of the files, what kind of framework to start with, folder name, webpart name, webpart description (see fig.).

When you’re done, hit enter and the solution will be created. At the end you will get a Congratulation message.

Next, get yourself inside the newly created folder, in my case SPFx1. So, change the directory: cd SPFX1 and type: gulp serve and hit enter. It should look like this:

Your project will open automatically in your default browser. If you get a Security Certificate error message just ignore it and hit continue. The local project link will look something like this: https://localhost:4321/temp/workbench.html

Click the add webpart + button and add “HelloWorld” webpart you created. That’s all, you got yourself a locally run SharePoint Framework!