Problem Statement

When you will create an SPFx webpart/extension using the yo generator of @microsoft/SharePoint it takes time to build the solution when you use “Gulp serve”. The time taken is large and impacts our work, and moreover, whenever we make changes to the code it further takes time to refresh the latest changes on the workbench(local/SharePoint).

SharePoint-2013-Hosting1

Solution

Thankfully, we have something which can reduce our build time drastically.

“spfx-fast-serve” is a CLI tool that does the job. A command-line utility, which modifies your SharePoint Framework solution, so that it runs continuously to serve command as fast as possible.

Steps to implement

Step 1 – Install the spfx-fast-serve package.

Open the spfx solution structure in nodeJs and run the command,

npm install spfx-fast-serve -g

 

Step 2

Run spfx-fast-serve and follow the instructions if prompted.

 

Step 3

Run npm install,

 

Step 4

Run npm run serve and enjoy the incredible speed of serve command,

 

Outcome

The time difference between the gulp serve and the npm run serve is huge and you can see the difference in the below table.

Final Thoughts

This is useful when you are building a large solution where you are using multiple webparts/extensions in a single solution as this will decrease the time taken to build the solution. Though the first time, it might take some more time but as soon as you make the changes in code the workbench loads up quickly compared to standard.