A SharePoint Framework (SPFx) extension solution that provides a framework-agnostic wrapper for building modern SharePoint applications. This solution contains both a web part and an application customizer that can be installed tenant-wide, enabling developers to break free from the traditional SPFx ecosystem limitations.
The solution acts as a wrapper around the @spfx-extensions/core
package, allowing you to use any modern bundler (Bun, esbuild, Vite, etc.) and the latest Node.js versions for your SharePoint solutions.
- SharePoint Online
Get your own free development tenant by subscribing to Microsoft 365 developer program
- SharePoint Online tenant
- App Catalog site collection
- Global administrator or SharePoint administrator permissions for tenant-wide deployment
- Node.js 22.14.0 or higher (but less than 23.0.0)
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
-
Clone this repository
git clone https://github.com/SPWizard01/spfx-extensions cd spfx-extensions
-
Install dependencies
npm install
-
Build the solution
npm run build
-
Package for deployment
npm run release
If you would like to change the name of the webpart to use your own then use
--change-name
argumentnpm run release --change-name My Awesome Webpart
-
Deploy to App Catalog
- Upload the generated
.sppkg
file from./dist/deploy/
to your tenant's App Catalog - Deploy the solution tenant-wide when prompted
- The solution will automatically create the required subsite and configuration infrastructure
- Upload the generated
After successful deployment, you can:
- Navigate to
/sites/appcatalog/SPFxExtensionsData/SitePages/SPFxExtensionsConfigurator.aspx
for global configuration - Add the SPFx Extensions Loader web part to any SharePoint page
- Then configure which app the webpart should load
- Configure applications at different scopes (Global, Hub, Site, Web) as needed
- Add webs where you want to add the apps
- Configure the app/upload necessary files
- Enable or disable the app at specific scope
Command | Description |
---|---|
npm run build |
Build the solution in development mode |
npm run serve |
Start the local development server |
npm run release |
Build and package for production deployment |
npm run clean |
Clean build artifacts |
npm test |
Run tests |
When deployed to your SharePoint tenant, this solution:
- Creates Infrastructure: Automatically provisions a special subsite at
/sites/appcatalog/SPFxExtensionsData
- Configuration Management: Sets up application-specific configuration lists in the subsite
- Global Configuration Page: Creates a configuration page at
SitePages/SPFxExtensionsConfigurator.aspx
- Multi-Scope Support: Enables configuration for Global, Hub, Site, and Web scoped solutions
- Framework Freedom: Acts as a wrapper around
@spfx-extensions/core
, freeing you from SPFx ecosystem constraints
- Use any bundler you prefer: Bun, esbuild, Vite, Webpack, or others
- Support for the latest Node.js versions (not limited to SPFx-supported versions)
- Modern JavaScript/TypeScript features without SPFx limitations
- Framework-agnostic development approach
- Break free from Microsoft's SPFx app ecosystem constraints
- Maintain full control over your build pipeline and dependencies
- Tenant-wide deployment capability
- Centralized configuration management
- Support for multiple scoping levels (Global/Hub/Site/Web)
This solution consists of two main components:
- Deployed tenant-wide for global functionality
- Initializes the core framework on every SharePoint page
- Manages application lifecycle and placeholder handling
- Provides a configurable interface for loading custom applications
- Integrates with the centralized configuration system
- Supports dynamic app loading and configuration
Both components leverage the @spfx-extensions/core
package to provide the underlying framework functionality.
- @spfx-extensions/core: The foundational package that provides framework-agnostic capabilities
- SharePoint Framework 1.21.0: Base SPFx framework for SharePoint integration
- TypeScript: Full TypeScript support with modern language features
- Subsite:
/sites/appcatalog/SPFxExtensionsData
- Configuration Lists:
SPFxExtensionsWhiteList
,SPFxExtensionsConfiguration
- Configuration Page:
SitePages/SPFxExtensionsConfigurator.aspx
- Global: Tenant-wide configurations
- Hub: Hub site specific configurations
- Site: Site collection specific configurations
- Web: Individual web specific configurations
This project welcomes contributions and suggestions. Please feel free to submit issues and enhancement requests.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
- Getting started with SharePoint Framework
- Building for Microsoft teams
- Use Microsoft Graph in your solution
- Publish SharePoint Framework applications to the Marketplace
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development