Introduction

SharePoint Framework (SPFx) is Microsoft's recommended development framework for building modern, responsive, and customizable solutions for SharePoint Online and Microsoft 365. It allows developers to create client-side web parts, extensions, and custom user experiences using technologies such as TypeScript, React, HTML, and CSS.

SPFx solutions run directly within the SharePoint environment and can interact with SharePoint Lists, Libraries, Microsoft Graph, and other Microsoft 365 services.

In this article, we will set up a complete SPFx development environment from scratch and create our first SharePoint Web Part.

Below is the complete step-by-step setup for SharePoint Framework (SPFx) Web Part development on Windows, starting from a fresh machine.

Recommended approach: Use SPFx + React + TypeScript + VS Code for SharePoint Online development.

Step 1 — Install Node.js

Download the Node.js version supported by the SPFx version you plan to use.

Node.js official download

After installation, open Command Prompt:

node --version

npm --version

Keep note of both versions.

Important: Don't automatically use the newest Node.js release. SPFx versions have specific Node.js compatibility requirements.

Step 2 — Install Visual Studio Code

Download: Visual Studio Code

Install it with the default options.

Verify:

code --version

Step 3 — Install Git

Download: Git for Windows

Install using the default options.

Verify:

git --version

Step 4 — Install Yeoman

Open Command Prompt as Administrator.

Run:

npm install -g yo

Verify:

yo --version

Step 5 — Install SharePoint Framework Generator

Run:

npm install -g @microsoft/generator-sharepoint

Verify:

npm list -g @microsoft/generator-sharepoint --depth=0

You should see something similar to:

@microsoft/[email protected]

Step 6 — Create an SPFx project folder

Create a development folder:

mkdir C:\SPFx

Move into it:

cd C:\SPFx

Create a project folder:

mkdir MyFirstWebPart
cd MyFirstWebPart

Step 7 — Create the SPFx project

Run:

yo @microsoft/sharepoint

The generator will ask several questions.

Example answers

Solution name:

MyFirstWebPart

Which type of client-side component to create?

WebPart

What is your Web part name?

MyFirstWebPart

Which framework would you like to use?

React

For a modern project, React is a good choice.

Step 8 — Open the project in VS Code

After the generator finishes:

code .

Your project will look approximately like:

MyFirstWebPart
│
├── config
├── node_modules
├── src
│   └── webparts
│       └── myFirstWebPart
│           ├── MyFirstWebPart.ts
│           ├── MyFirstWebPart.module.scss
│           ├── components
│           └── loc
│
├── sharepoint
├── package.json
├── tsconfig.json
├── gulpfile.js
└── README.md

Step 9 — Install project dependencies

Inside the project folder:

npm install

Wait until installation completes.

Step 10 — Build the project

Run:

gulp build

If everything is correct, you should see a successful build.

You can also run:

gulp bundle

Step 11 — Trust the local development certificate

For local SPFx development, run:

gulp trust-dev-cert

If Windows asks for permission to trust the certificate, accept it.

Step 12 — Start the local SPFx server

Run:

gulp serve

You should get a local URL similar to:

https://localhost:4321/temp/workbench.html

Open it in your browser.

Step 13 — Test your Web Part

The SharePoint Framework Workbench should open.

VS Code
   ↓
Edit SPFx Code
   ↓
gulp serve
   ↓
Local Workbench
   ↓
Test Web Part

Your development flow is now:

Step 14 — Connect to your SharePoint site

For SharePoint Online development, you can also use the hosted workbench:

https://YOUR-TENANT.sharepoint.com/sites/YOUR-SITE/_layouts/15/workbench.aspx

For example:

https://contoso.sharepoint.com/sites/Development/_layouts/15/workbench.aspx

This allows you to test your web part against SharePoint.

Step 15 — Create a production build

When your development is complete, run:

gulp clean

Then:

gulp bundle --ship

Then:

gulp package-solution --ship

The SharePoint package will be created under:

sharepoint

└── solution

└── my-first-web-part.sppkg

Step 16 — Open SharePoint App Catalog

Go to your SharePoint App Catalog.

Upload the generated:

.sppkg

file.

SharePoint will ask whether you want to make the solution available to sites.

Choose the appropriate option for your organization.

Step 17 — Add the SPFx app to your SharePoint site

Go to your SharePoint site.

Select:

Settings → Add an app

or open:

Site contents → New → App

Find your SPFx solution and add it.

Step 18 — Add the Web Part to a SharePoint page

Open a SharePoint page.

Click:

Edit → + Add a new web part

Find:

MyFirstWebPart

Add it to the page.

Publish the page.

Your SPFx Web Part is now running in SharePoint Online.

Complete command list

Once the prerequisites are installed, the basic commands are:

npm install -g yo
npm install -g @microsoft/generator-sharepoint

mkdir C:\SPFx
cd C:\SPFx

mkdir MyFirstWebPart
cd MyFirstWebPart

yo @microsoft/sharepoint

npm install

gulp build
gulp trust-dev-cert
gulp serve

For deployment:

gulp clean
gulp bundle --ship
gulp package-solution --ship

Then upload:

sharepoint/solution/*.sppkg

to the SharePoint App Catalog.

Final SPFx development flow

1. Install Node.js
        ↓
2. Install VS Code
        ↓
3. Install Git
        ↓
4. Install Yeoman
        ↓
5. Install SharePoint Generator
        ↓
6. Create SPFx project
        ↓
7. Select Web Part
        ↓
8. Select React
        ↓
9. npm install
        ↓
10. gulp build
        ↓
11. gulp trust-dev-cert
        ↓
12. gulp serve
        ↓
13. Test Web Part
        ↓
14. Develop in VS Code
        ↓
15. gulp bundle --ship
        ↓
16. gulp package-solution --ship
        ↓
17. Upload .sppkg to App Catalog
        ↓
18. Add app to SharePoint
        ↓
19. Add Web Part to SharePoint page

Recommended first project

For learning, create a simple Employee Directory Web Part:

SharePoint List
       ↓
SPFx React Web Part
       ↓
Microsoft Graph / SharePoint REST
       ↓
Display Employees
       ↓
Search
       ↓
Filter
       ↓
SharePoint Page

SharePoint Page

This will teach you the important SPFx concepts: React components, SharePoint API, lists, properties, permissions, deployment, and debugging.