SharePoint Framework (SPFx) tutorials
Step-by-step SPFx tutorials from real projects: set up the toolchain, build web parts and extensions, work with SharePoint data, Fluent UI, PnP and Microsoft Graph, and fix the errors you'll hit on the way.
Jump to a topic
New to SPFx? Follow these steps
Already working with SPFx? Skip ahead to the topic you need.
Set up your machine
Node, the toolchain and your first project.
Build your first web parts
Web parts, property panes and Fluent UI.
Work with data
Read and write SharePoint data, forms and Microsoft Graph.
Ship real solutions
Extensions, specialized web parts and fixing errors.
Setup and fundamentals
Install the tools, create your first project and understand how an SPFx solution fits together.
8 tutorialsBuild tools, environment variables and Heft
The Gulp and Heft toolchains, build settings and environment variables.
4 tutorialsWeb parts and UI patterns
Client-side web parts, property panes and common UI patterns.
10 tutorials- Modern script editor web part with SPFx
- SPFx countdown timer web part
- SPFx dynamic accordion web part with PnP React controls
- Configure web part icon in SPFx
- SPFx preconfiguredEntries explained
- Create modal popup in SPFx
- SPFx property pane slide manager (drag and drop)
- SharePoint Framework (SPFx) Cascading Dropdown
- SPFx Drag and Drop File Upload: Single & Multiple Files
- Export Data to Excel in SharePoint Framework (SPFx)
Fluent UI controls
Fluent UI React controls for forms, lists and pickers that look native in SharePoint.
9 tutorials- SPFx Fluent UI React Dropdown
- Bind SharePoint list items to SPFx Fluent UI React dropdown
- SPFx Fluent UI Basic List
- SPFx Fluent UI React ChoiceGroup and Checkbox
- Fluent UI React ComboBox control in SPFx
- Fluent UI DocumentCard in SPFx web part
- SPFx SwatchColorPicker Fluent UI React control
- Fluent UI in SharePoint Framework
- SPFx SwatchColorPicker Office UI Fabric React Control example
CRUD operations and data access
Read and write SharePoint lists and libraries with SPHttpClient, REST and PnP JS.
8 tutorials- Retrieve SharePoint list items using SharePoint Framework
- SharePoint Framework CRUD operations using React
- SharePoint Framework CRUD operations with no JavaScript framework
- PnP React pagination control in SPFx
- SPFx upload file to SharePoint document library with metadata
- Create folders and subfolders in SharePoint document library using SPFx
- Filter SharePoint List Items in SharePoint Framework (SPFx)
- SharePoint development: REST API, JSOM, CSOM, CAML and webhooks
Forms, validation and formatting
Build forms with validation and format the data you show.
4 tutorialsExtensions and command sets
Application customizers, field customizers and ListView command sets.
6 tutorialsMicrosoft Graph, site data and integrations
Call Microsoft Graph and other APIs from SPFx.
6 tutorialsUser experience and specialized web parts
Specialized web parts and UX touches for real intranet pages.
3 tutorialsErrors, troubleshooting and common issues
The build, package and runtime errors developers hit most, with the fix for each.
17 tutorials- Fix: @pnp/sp/presets/all has no exported member sp
- “Sorry, something went wrong” error in SPFx – fix
- SPFx error – check your network connection
- SPFx unexpected startObject/startArray JSON error – fix
- SPFx serve – the API entry could not be loaded
- No gulpfile found in SPFx – how to fix
- Cannot find module ‘jquery’ in SPFx – fix
- @microsoft/generator-sharepoint update check failed
- npm install Failed: ENOENT, EPERM rmdir, EBADF Errors While Creating SPFx Solution
- Cannot find module ‘@microsoft/sp-build-web’
- Type ‘WebPartContext’ is not assignable to type ‘BaseComponentContext’
- module has no default export
- property ‘marquee’ does not exist on type ‘jsx.intrinsicelements’
- An unexpected ‘StartArray’ node was found when reading from the JSON reader. A ‘StartObject’ node was expected
- a ‘primitive value’ or ‘StartObject’node was expected
- can’t load the application on this page. use the browser back button to retry. if the problem persists, contact the administrator of the site and give them the information in technical details.
- The specified resource does not exist azure blob storage
Interview questions
Real SPFx interview questions with answers.
1 tutorialNewest SPFx tutorials
Fix: Module ‘”@pnp/sp/presets/all”‘ has no exported member ‘sp’ (TS2305) in SPFx
How to Export Data to Excel in SharePoint Framework (SPFx)
How to Update SPFx Version (Complete Step-by-Step Guide)
How to Filter SharePoint List Items in SPFx (PnPjs, REST, Current User and Date Range)
How to Get the Current Theme in SPFx (3 Methods That Actually Work)
SPFx Drag and Drop File Upload: Single & Multiple Files (Complete Guide)
Want a structured path?
Build production-ready SPFx web parts, extensions and Teams tabs with TypeScript, React, PnP JS, Fluent UI and Microsoft Graph. Or see the SPFx career roadmap with the skills, certification and pay for the role.
Keep learning across Microsoft 365
Bijay Kumar
13-times Microsoft MVP · Founder, TSinfo Technologies
Bijay has more than 18 years of hands-on experience with Microsoft technologies, specializing in SharePoint, the Power Platform, SPFx and Microsoft 365. He has trained thousands of developers and IT professionals through SPGuides, wrote “SharePoint Online Modern Experience Practical Guide”, co-wrote “Microsoft Power Platform: A Deep Dive”, and runs the SPGuides YouTube channel. Every lesson comes from real client projects.
Frequently asked questions
What is SPFx used for?
The SharePoint Framework is Microsoft's model for customizing SharePoint Online and Teams: web parts, extensions, form customizers and Teams tabs built with TypeScript and React. It replaced SharePoint Add-ins, which stopped working on 2 April 2026.
What do I need to know before learning SPFx?
Basic JavaScript and web development help most. You'll pick up TypeScript and React as you go; our TypeScript hub covers the parts SPFx uses.
Should I use the Heft or the Gulp toolchain?
New projects should follow the current Microsoft guidance for your SPFx version. Our setup tutorials cover both, including how to move an existing project from Gulp to Heft.
How do I fix npm and build errors in SPFx?
Most come from a Node version your SPFx version doesn't support, or a broken node_modules folder. The Errors topic on this page lists the common ones with the fix for each.
Is there an SPFx certification?
No. Microsoft doesn't offer an SPFx-specific exam, so a small portfolio of working web parts and extensions matters most in interviews.