Setting up your SPFx development environment

Today I am going to walk you through setting up your development environment for the SharePoint Framework (SPFx). At the time of writing this the latest version of SPFx is 1.8.2 and which means that we will be installing NodeJS LTS version 10.16. I will walk you through how to download and install the applications you will need:

• NodeJS & NPM LTS (version 10.16)
• Visual Studio Code (any code editor will work, but I prefer VS Code)
• Gulp
• Yeoman Generator

NodeJS LTS & NPM

If you have ever worked with NodeJS and NPM on a project that support different versions you will run into the problem that the current version of NodeJS you have installed is not supported. You will need to uninstall the version you currently have of NodeJS, and install the version you need. This is cumbersome and super annoying.

There is a better way, using Node Version Manager (nvm). Essentially, nvm allows you to install multiple versions of NodeJS and switch between them via the console. Andrew Connell wrote a blog post (linked below) which talks about the benefits of nvm. I have also included a link to Corey Butlers GitHub, where you can download nvm for Windows.

• Andrew Connell – Better Node.js Install Management with Node Version Manager: http://www.andrewconnell.com/blog/better-node-js-install-management-with-node-version-manager
• Corey Butler GitHub – Node Version Manager (nvm) for Windows: https://github.com/coreybutler/nvm-windows

Follow the instructions on the Node Version Manager (nvm) for Windows GitHub page to install the application. Once it’s installed you can follow along with these instructions.

Installation instructions using nvm

1. Open PowerShell and type nvm. Validate that it recognizes the command and the installation went as expected
2. Type nvm install 10.16.0 to install the latest version of NodeJS LTS
3. Type nvm use 10.16.0 to start using that version

nvm Commands

Visual Studio Code

Visual Studio Code is a lightweight code editor that you can use for SPFx development (almost any type of development you can think of). I prefer to use Visual Studio Code because of all the extensions that are offered and built for web development and SPFx development specifically. However any code editor will work.

You can download and install Visual Studio Code for free from the following link:

• Visual Studio Code: https://code.visualstudio.com/download

Yeoman Generator and Gulp

The next step is to install yeoman generator (to quickly scaffold up SPFx projects) and gulp (task running engine) through npm.

Installation instructions:

1. Open PowerShell and type npm install -g yo gulp-cli (the -g means that it will be installed globally)
2. Next type npm install -g @microsoft/generator-sharepoint to install the yeoman generator for SharePoint

Verifying installations

You can verify the installed versions npm, yeoman, gulp, and generator-sharepoint by running the following command: npm list -g –depth 0.

Globally installed npm modules

For more information on on setting up your SharePoint Framework development environment please check out the following link:

• Microsoft Docs – Set up your SharePoint Framework development environment: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Lastly, if you are serious about SPFx development and are looking for training videos or online classes I highly recommend you check out Andrew Connell’s site Voitanos. His courses have been highly instrumental in bringing me up to speed quickly and breaking everything down.