M365 – SharePoint Online – SPFx-Fast-Serve: An alternative for gulp serve

Hi Everyone,

Firstly, Happy Diwali to all! Stay safe, stay healthy, god bless all!

In this article, we are going to see spfx-fast-serve which can be a replacement for gulp serve. Spfx-fast-serve is a command line utility to speed up the process of building your webpart solution and render on to your local workbench or SharePoint workbench.

How Spfx-fast-serve works?

The tool adds necessary files to your build but produces same output as gulp serve and significantly faster than it. Because of some of the following reasons:

  1. All compilations are done in a memory with webpack.
  2. Compiles only modified files, whereas gulp serve builds whole solution everytime you modify any single file.
  3. Have a look at two below screenshots to see difference between gulpfile.js before and after spfx-fast-serve
Image-1 SPFx – gulpfile.js before spfx-fast-serve
Image-2 SPFx – gulpfile.js after spfx-fast-serve

Features:

  1. Live reloading.
  2. Supports both local as well as sharepoint workbench.
  3. Debugging from VS code possible.
  4. Adds approximately 30MB files to node-modules folder.
  5. We can switch back to gulp serve at any point of time while developing, no configurations needed for gulp serve again.

SharePoint Versions Supported:

  1. SharePoint Online
  2. SharePoint 2019

How to Configure:

  1. Open node command prompt and run npm install spfx-fast-serve -g.
    Note: This command has to be run only once and is not needed for every SPFx solution. (As on my machine this command has already been run, so cannot share screenshot here)
  2. Open your SharePoint Framework solution on command line, which is to be speeded up.
  3. Run spfx-fast-serve.
Image-3 SPFx – Running spfx-fast-serve

4. Run npm install.
5. Run npm run serve instead of gulp serve to see the webpart either in the local or hosted workbench.

For the first time only it takes little bit time, but once the webpart is loaded fully on workbench, every time the webpart is modified it loads immediately on workbench and you can actually see the difference.

References:

  1. https://www.npmjs.com/package/spfx-fast-serve

This site uses Akismet to reduce spam. Learn how your comment data is processed.