SharePoint Customization with SPFx & GitHub

How to customize SharePoint the modern way: source-controlled SPFx web parts and extensions in a GitHub repo, packaged into .sppkg solutions, deployed through GitHub Actions to the app catalog, and installed on real sites. Includes real copy-pasteable code (manifest, web part, SPHttpClient data fetch, app customizer), the full package lifecycle (add → deploy → install → upgrade), verified deployment actions for CI/CD, plus how to extend the same repo-driven pipeline to site structure (PnP provisioning templates, site scripts), scripted page creation, and publishing documents and static content into SharePoint libraries — and a curated map of the best example galleries and resources to study.

intermediate 120 min 12 lessons

Lessons

The Big Picture: Why Customize SharePoint from a GitHub Repo
The modern SharePoint customization model — client-side code, no farm solutions — and the source-controlled ALM loop: repo → CI/CD → app catalog → sites.
8 min
The Toolbox: SPFx, CLI for Microsoft 365 & PnP PowerShell
The three main tools in modern SharePoint customization — what each does, where they overlap, and how to pick the right one for the job.
8 min
SPFx Foundations: Scaffold, Project Anatomy & the Dev Loop
What SPFx actually is, the toolchain you need (Node, Yeoman, Gulp), how to scaffold a solution, what every generated file does, and the gulp serve + workbench development loop.
10 min
Your First Web Part: Real Code, Dissected
The manifest and the web part class — what a scaffolded no-framework web part actually contains, line by line, with real copy-pasteable code.
10 min
Real Data: Talking to SharePoint with SPHttpClient
How a web part reads actual list data — the REST endpoint pattern, SPHttpClient usage with real async/await code, loading and error states, and when to reach for PnPJS.
10 min
Extensions: Code That Wraps the Whole Site
The three SPFx extension types — application customizer, field customizer, list view command set — with a real application customizer that injects a banner on every page.
8 min
The App Catalog & Package Lifecycle
What the .sppkg actually is, tenant vs site-collection app catalogs, the add → deploy → install → upgrade lifecycle, and the package-solution.json flags that control it.
9 min
Ship It: Deploying SPFx from GitHub Actions
The end-to-end deployment pipeline: service-principal auth, the official CLI for Microsoft 365 GitHub Actions (login, deploy, runscript), a complete verified workflow YAML, environment strategy, and rollback.
12 min
Site Structure & Pages as Code: What Git Can (and Can't) Own
PnP Provisioning Templates and site scripts for structure, why modern page content won't round-trip to git, and the accepted scripted-provisioning pattern for pages — with real, verified commands.
11 min
Documents & Static Content: The Repo → SharePoint Pipeline
Publishing document-library files with metadata from a repo, the GitHub Actions pipelines that do it, SharePoint CDN and static-asset options, and where documents should really live.
11 min
Great Examples to Study & the Best Resources
The PnP sample repositories, the searchable samples gallery, official learning paths, tools, and six standout community projects worth studying — every link verified.
9 min
Grand Quiz — SharePoint Customization with SPFx & GitHub
Eighteen questions across all nine lessons — the mental model, tooling, web part code, data access, extensions, the app catalog lifecycle, GitHub Actions deployment, and resources. Answer everything to get your grade.
10 min