SPFx Development Environment Setup: The Complete Guide

Setting up an SPFx development environment can be tricky. Here’s my step-by-step guide to avoid common pitfalls.

Prerequisites

• Node.js 10.x (not 12.x yet – compatibility issues)
• Visual Studio Code
• Office 365 developer tenant

Installation

# Install Node 10 (use nvm for version management)
nvm install 10
nvm use 10

# Install global tools
npm install -g yo gulp @microsoft/generator-sharepoint

# Verify
yo --version
gulp --version

VS Code Extensions

• SPFx Snippets
• ESLint
• Prettier
• Azure Account (for deployments)

Create First Project

mkdir my-webpart && cd my-webpart
yo @microsoft/sharepoint

# Options:
# - Solution name
# - SharePoint Online only
# - Current folder
# - WebPart
# - React framework

Common Issues

• Node version mismatch: Use nvm
• Certificate errors: Run gulp trust-dev-cert
• Slow builds: Check antivirus exclusions

References

• SPFx Environment Setup