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.