DEV Community

Guido Zambarda
Guido Zambarda

Posted on • Originally published at iamguidozam.blog on

Boosting Your SPFx Development with spfx-fast-serve

#spfx #fastserve #development

Introduction: Gulp Serve vs. spfx-fast-serve

When developing SharePoint Framework (SPFx) solutions, the traditional gulp serve command is a common way to test your project locally. However, one major downside is the slow build and reload times, especially for larger projects. This is where spfx-fast-serve comes in, providing a faster alternative with efficient build processes and hot module reload capabilities.

Installing spfx-fast-serve

To get started with spfx-fast-serve you will need to follow a few steps.

Firstly you need to Install the package globally, you can do this with the following command :

npm install -g spfx-fast-serve
Enter fullscreen mode Exit fullscreen mode

Once that you have the spfx-fast-serve package installed globally you are ready to start using it.

To initialize fast-serve in an SPFx project you will have to navigate to your project main folder and, once there, execute the following:

spfx-fast-serve
Enter fullscreen mode Exit fullscreen mode

This will start a wizard that let’s you install (or not) the dependencies:

If you want to install the packages simply press enter, otherwise if you want to postpone the installation you can press esc.

Once finished with the wizard you will be welcomed by the following message:

After the wizard is completed, the command will add a specific package in the package.json file:

"spfx-fast-serve-helpers": "~1.20.0"
Enter fullscreen mode Exit fullscreen mode

The version of the package will depend on the version of SPFx you’re using.

Keep in mind that the spfx-fast-serve package version 4 supports SPFx starting from version 1.17.

Another small enhancement to the package.json file will be to add a new script:

"serve": "fast-serve"
Enter fullscreen mode Exit fullscreen mode

This script will serve your project.

Using fast-serve to test your project

After the installation and the setup, you can test your SPFx solution simply by using spfx-fast-serve. To start the serve operation using the newly added script command all you will have to do is to execute the following command:

npm run serve
Enter fullscreen mode Exit fullscreen mode

After the command finished performing the operations you can navigate to your SharePoint workbench and start using your project. Now, try to make a small change in your code and…witness the faster refreshing time!

Why Use spfx-fast-serve?

Here are some reasons why spfx-fast-serve is beneficial for SPFx development:

  • Faster Build Times: Significantly reduces the build time compared to gulp serve, especially for large projects.
  • Hot Module Reloading (HMR): if possible, it automatically updates changes without refreshing the page. If the change performed involve a simple component with few dependency it should be able to refresh only that component, otherwise it will refresh the whole page.
  • Developer Experience: Reduces waiting time, enabling a smoother and faster development process.
  • Easy Integration: Simple to set up and compatible with existing SPFx projects. If you want to know the supported SPFx version check the official GitHub repository here.

Conclusions

Using spfx-fast-serve can greatly improve your productivity, allowing you to focus on coding rather than waiting for builds. Give it a try in your next SPFx project and experience the difference!

Hope this helps!

Top comments (0)