Set up your SharePoint client-side web part development environment

You can use Visual Studio, or your own custom development environment to build SharePoint client-side web parts. You can use a Mac, PC, or Linux.

Note: Before following the steps in this article, be sure to Set up your Office 365 Tenant.

You can also follow these steps by watching the video on the SharePoint PnP YouTube Channel.

Screenshot of the YouTube video player for this tutorial

Install developer tools

NodeJS

Install NodeJS version 6.x.

  • If you are in Windows, you can use the msi installers in the above link for easiest way to setup NodeJS
  • If you have NodeJS already installed please check you have the latest version using node -v. It should return the current LTS version.
  • If you are using a Mac, it is recommended you use homebrew to install and manage NodeJS.

Note: The SharePoint Framework build pipeline doesn't currently support the LTS version of Node.js. Instead, download Node.js version 6.11.5. This installs npm 3.10.10. Note that if you have a v5.x version of npm, you will need to downgrade to an older npm version by using the following command: npm install -g npm@3.

Code Editors

Install a code editor. You can use any code editor or IDE that supports client-side development to build your web part, such as:

The steps and examples in this documentation use Visual Studio Code, but you can use any editor of your choice.

If you are using Ubuntu

You need to install compiler tools using the following command:

sudo apt-get install build-essential

If you are using fedora

You need to install compiler tools using the following command:

sudo yum install make automake gcc gcc-c++ kernel-devel

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

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.

To install the SharePoint Framework Yeoman generator globally, enter the following command:

npm install -g @microsoft/generator-sharepoint

If you need to switch between the different projects created using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command:

npm install @microsoft/generator-sharepoint --save-dev

Optional tools

Here are some tools that might come in handy as well:

Next steps

You are now ready to build your first client-side web part!