A Complete Guide to SharePoint Framework (SPFx)

Explore SharePoint 2007 (MOSS) and its full-trust server-side development with WSP packages, their farm scope and security risks, and the shift toward SharePoint framework for cloud-ready solutions not supported online.

Explains SharePoint 2010 sandbox solutions as a restricted, site-collection scoped model that lets admins deploy code with limited server access, paving the way for no-code NCSS and the app model.

Explore how SharePoint 2013 introduces the app model, decoupling SharePoint from app runtime to run code externally, with SharePoint hosted and provider hosted deployment options.

Explore how SharePoint 2016 serves as a cloud-friendly bridge to the SharePoint framework, enabling SPF 1.1 and client-side development. It highlights hybrid on-premises and cloud readiness.

Explore how SharePoint 2019 delivers modern, cloud-like experiences on premises, supports SharePoint framework 1.4 for modern pages, and enables hybrid, mobile-friendly integration with SharePoint Online and Microsoft 365.

Explore SharePoint online with cloud-first development and SPFx for modern, responsive client-side solutions. Build JavaScript-based solutions that seamlessly integrate with the Microsoft ecosystem and stay up to date.

Explore how the SharePoint framework governs client-side development, enabling pages and web parts that connect to SharePoint data and external sources via REST APIs, with open source toolchains.

Discover how the SharePoint framework uses an open source toolchain—Node.js, npm, gulp, TypeScript, Yeoman—to enable client-side rendering, cross-platform development, and governance over web parts.

Set up the SPFx development environment, identify prerequisites such as a Microsoft 365 tenant and app catalog, and learn cross-platform tools like NodeJS, npm, Yeoman, gulp, VS Code, and TypeScript.

Install Node.js as the first step for developing SharePoint framework solutions, since it provides the runtime for tools like Yeoman, gulp, webpack, and npm manages dependencies, enabling cross-platform development.

Learn how npm, the node package manager, installs, updates, and manages JavaScript libraries for SharePoint framework web parts, supports global and local installations, and handles dependencies in package.json.

Install the SharePoint framework development toolchain with gulp and Yeoman to automate build, bundle, and deployment tasks for SPFx solutions, including TypeScript to JavaScript and Sass to CSS.

Update npm and global packages to stay compatible with the latest SharePoint framework, React, and TypeScript, fix bugs and security vulnerabilities, and keep SPFx tooling up to date.

Explore the SharePoint framework solution structure in vscode, focusing on the main web part entry point and essential folders like src, lib, dist, config, and manifest.

Learn how to run and test a SharePoint framework web part locally using gulp serve with a trusted dev certificate, and preview it in the SharePoint hosted workbench.

Package and deploy SPFx solutions by bundling with gulp bundle --ship, packaging with gulp package solution, and deploying via the tenant app catalog to enable on all SharePoint sites.

Learn to deploy and manage SPFx apps with the site collection app catalog in SharePoint, enabling site-scoped governance via PowerShell and site collection admin rights.

Learn about npm packages and their dependencies in SharePoint Framework projects. Distinguish dependencies from dev dependencies and grasp semantic versioning using caret, tilde, and exact versions for consistent npm installs.

Explore how to use BNP property controls to enhance the SharePoint Framework web part property pane with advanced UI, including the list picker, and implement property change handling in React.

Explore how to configure SharePoint framework web part icons to boost UI and UX, including customizing icons in Manifest.json, using the office fabric icon font name, and aligning with branding.

Learn to use Fluent UI iconography as web part icons in SPFx by copying the airplane icon name into manifest.json.

Specify an external image URL in the icon image url property as an absolute URL to render a custom icon for a SharePoint framework web part, without bundling the image.

Convert your image to a base64 string online and use it as the SharePoint framework web part icon. Save and reload the web part to preview the base64 icon.

Learn how to work with CSS in SharePoint framework using SCSS for component styling, module CSS scoping, hashing to prevent collisions, and features like variables, nesting, mixins, and media queries.

Master best practices for writing scss in SharePoint framework by using variables for consistency, avoiding inline styles, modularizing with partials, aligning with Fluent UI, and optimizing for responsive design.

Discover how SPFx uses CSS and SCSS by generating unique runtime class names that scope web part styles and prevent collisions.

Explore hosting SPFx web part assets on Microsoft Azure CDN, enabling fast delivery, scalability, and secure custom-domain support by decoupling hosting from SharePoint.

Deploy a SharePoint framework solution to Azure CDN by configuring packaging to exclude client assets, setting Azure storage and manifest details, and building and deploying with gulp.

Configure SPFx to use Microsoft 365 CDN by enabling include client side assets and updating the rightManifest.json with the CDN base path. Package with gulp bundle and gulp package-solution.

Provision SharePoint assets by packaging lists, libraries, fields, and content types with the client-side solution, enabling web parts to interact with these resources.

Explore asset provisioning in SharePoint framework by building and deploying a solution package to the app catalog, then provisioning fields, content types, and list instances.

Deploy the SharePoint framework solution to the site collection app catalog, then add and deploy the provision assets client-side solution on the site.

Understand SPFx asset provisioning limitations and best practices, including site-specific, static configurations, and guidance to test in non-production and use PowerShell or PnP for complex deployments.

Explore how React serves as a focused, declarative UI library—not a framework—ideal for the SharePoint Framework, pairing with routing, state management, and component-based, one-way data flow.

React and the SharePoint framework pair well, delivering fast UI updates via React’s virtual DOM and diffing, with SPFx handling data, APIs, and integration.

Explore how the React element, the smallest immutable building block in React, describes the user interface and renders dynamic content for SPFx web parts using the virtual dom.

Learn how React props in SharePoint framework pass data and configuration from web part to React components, enabling reusable, dynamic UI by passing context and web part properties.

Learn how React state stores data and drives rendering in SharePoint framework components, including initializing state, fetching data from SharePoint or external APIs, and updating the UI on user interactions.

Explore how to call a child component from a parent in a SharePoint Framework SPFx React web part, passing data via props to a 'react employee' component.

Explore how to use spHttpClient in a React SPFx web part to perform crud operations on a SharePoint list via rest api, with built-in authentication and simple error handling.

Explore building a SharePoint Framework web part with PnP JS to perform create, read, update, and delete operations on a SharePoint list using a React UI with four buttons.