Sunday, May 11, 2025

๐Ÿš€ Essential SPFx (SharePoint Framework) Commands for Every Developer

Whether you're new to SharePoint Framework (SPFx) or a seasoned pro, having a go-to list of core commands can significantly improve your development workflow. In this post, we'll walk through the most important SPFx CLI commands—from setting up your environment to packaging and deploying your solution.


๐Ÿ› ️ Setting Up Your SPFx Project

Start by scaffolding a new project using the Yeoman generator provided by Microsoft. Make sure Node.js and npm are installed before you proceed.

yo @microsoft/sharepoint

After scaffolding the project, install all dependencies:

npm install

To update dependencies later:

npm update

๐Ÿ” Trusting the Development Certificate

If you're using the local workbench, you need to trust the developer certificate for HTTPS support:

gulp trust-dev-cert

๐Ÿงช Running the Local Workbench

To build and serve your project locally, use:

gulp serve

This command starts a local server at:

https://localhost:4321/temp/workbench.html

You can also test your solution in SharePoint Online:

https://your-sharepoint-site/_layouts/15/workbench.aspx


๐Ÿ—️ Building and Bundling Your Solution

During development or before packaging for production, build your solution with:

gulp build

For production-ready output:

gulp bundle --ship

๐Ÿ“ฆ Packaging the Solution

Once bundled, create the .sppkg file for deployment using:

gulp package-solution --ship

The output will appear in the sharepoint/solution/ folder.

๐Ÿš€ Deploying the Solution

There is no CLI command for uploading the .sppkg file—you must manually upload it to the SharePoint App Catalog via the SharePoint admin center.

If you're using an Azure CDN to host assets, you can deploy to it (assuming it's configured) with:

gulp deploy-azure-storage

๐Ÿ” Cleaning and Managing Dependencies

To clean the build output:

gulp clean

Useful npm commands for global tools:

npm install -g yo gulp

npm install -g @microsoft/generator-sharepoint

Check for outdated npm packages:

npm outdated

๐Ÿง  Final Thoughts

SPFx offers a powerful, modern way to build SharePoint customizations using familiar web development tools. Knowing these commands will help you build, test, and deploy solutions more effectively. Bookmark this list or print it out—it's a great cheat sheet for any SPFx project.

No comments:

Post a Comment