Set Up Your SharePoint Dev Environment: The Complete Guide

This definitive guide walks through every step to get your SharePoint dev setup fully prepared, whether you’re new to the platform or a seasoned pro.

When I first started coding SharePoint application development, getting my machine configured was overwhelming with so many moving pieces.

I pieced things together from various blogs and docs only to run into cryptic node errors.

After much trial and error, I want to share a proven approach so you can avoid those early difficulties.

We’ll set core components like Node, Yeoman, tenant credentials, authentication flows, and editor tools:

Step 1: Install Node.js & npm

Node provides the foundation for the SharePoint toolchain. Download the LTS version 12+, which also includes the node package manager (npm).

Validate the installations from the command line:

node -v

npm -v

Pro tip: Updating npm with npm install -g npm@latest is recommended too.

Step 2: Install Additional Global Tools

Several tools make SharePoint development much easier:

npm install -g yo gulp-cli

This gives you:

● Yeoman: Scaffolds SharePoint projects

● gulp: Runs build tasks

Step 3: Get the SharePoint Yeoman Generator

The Microsoft SharePoint generator for Yeoman does the heavy lifting of creating SharePoint apps:

npm install -g @microsoft/generator-SharePoint

Now from any folder, you can run yo @microsoft/SharePoint to create a new client-side project.

Step 4: Register SharePoint Apps

SharePoint requires that apps targeting tenant data are registered properly for permissions. We have two options:

Option 1: Use SPFx Dev Certificates

The Yeoman generator can create wildcard SSL certificates for local testing. When deploying apps, however, registration with Azure AD is required.

Option 2: Register with Azure Active Directory

For production apps, manually register the app in Azure Portal to acquire the client ID. Refer to Microsoft’s docs for detailed steps.

Step 5: Install Editor Extensions

To improve the development experience, install extensions for your editor:

Visual Studio Code

● SharePoint Framework Extension

● ESLint Extension

Others

See Microsoft’s recommendations for additional editors.

These give you IntelliSense, linting, debugging tools, and more while coding SharePoint apps.

Step 6: Start Building!

With the fully equipped environment ready, it’s time to create your first SharePoint client-side solution!

Generate a sample project to validate the setup:

yo @microsoft/SharePoint

That covers getting started from zero all the way to scaffolding a running app — just 6 steps.

For any issues or to dive deeper, refer to Microsoft’s official SPFx documentation. It provides extremely thorough technical references for SharePoint application development on the platform.

With your modern SharePoint development environment ready to roll, you now have the power to customize, extend, and integrate however you see fit.