Building SPFx Projects with `fast-serve` – and save development time!

There really is a lot that I like about the SharePoint framework (SPFx) – in fact, it was getting to grips with the first SPFx version back in 2017 that sparked my interest of SharePoint Online and has kept it alive to this day.

In my opinion, SPFx is a robust framework that allows developers to create modern, state-of-the-art web applications. Under the hood, a combination of several modules of modern web technologies and tools provide the power needed to support client-side application development for SharePoint Online in particular, all written in TypeScript (or even ‘plain’ Javascript if you really want 😃). The developer toolchain is based on popular open source client-side development tools such as npm, Typescript, Yeoman, webpack and gulp. This allows any developer to use a Javascript framework of their choice. According to the official documentation, the performance of SPFx is reliable.

All cool and neat so far – but not everything shines as brightly as it seems.

Deprecated Dependencies still exist in the Latest SPFx Version(s)

For example, «the Master of M365 Development» MVP Andrew Connell wrote about SPFx dependencies that should be «overhauled and refreshed» more than once; dependencies such as the implemented versions of Typescript, React and the RushStack compiler are not yet updated in (the current) SPFx v1.20! This can make it difficult to use some of the latest libraries that you want to use for your own projects. But follow Andrew Connell’s blog posts rather than me if you are really interested in details on this topic: https://www.voitanos.io/blog/sharepoint-framework-v1-20-whats-in-latest-update-of-spfx/

From long waiting times of build performance in SPFx projects

On this subject, I really wonder why the clever minds behind SPFx couldn’t somehow solve this «better». But one thing at a time: As mentioned earlier, «the SPFx toolchain uses Gulp tasks to build projects locally, create JavaScript bundles and use the resulting packages to deploy solutions» in a SPO tenant. The gulp serve command executes a series of Gulp tasks to create and start a local web server – and puts the SPFx solution into a local ‘watch’ mode. Behind the scenes, each update (and save) of your local project files triggers a rebuild of the entire codebase and updates the web browser running your solution. This process really can take a loooong time!

To your rescue: Speed up the Build Process with fast-serve

MVP Sergei-Sergeev has built an npm package that «significantly speeds up the gulp serve command»! According to his blog post, the idea behind it is to «use a completely custom webpack-based build to turn your sources into the exact same javascript bundles generated by gulp serve». And it really does! It really speeds up the «serve» process several times over. I’ve been using this ingenious tool for quite a while now – and I wouldn’t want to miss it in any of my SPFx projects!

Since fast-serve is a very well documented project on Github, it makes sense to get detailed insights directly from there: https://github.com/s-KaiNet/spfx-fast-serve

You can also find more information about the optimisations «behind the tool» in Sergei’s blog: https://spblog.net/post/2020/03/24/spfx-overclockers-or-how-significantly-speed-up-the-gulp-serve-command

Use fast-serve in your SPFx Project

Making use of the fast-serve tool is very easy – just follow these steps:

1. Check if the npm package spfx-fast-serve is already installed (globally): npm list -g spfx-fast-serve
   Install the package (globally) if not yet installed: npm install spfx-fast-serve -g
2. Navigate to your SPFx project where you want to add fast-serve
3. Run spfx-fast-serve --force-install to install all local dependencies (aka the spfx-fast-serve-helpers), to add them to the project’s package.json and also to add fast serve to the project’s build task configuration
4. Instead of running gulp serve, just start npm run serve to start the fast-serve process to build your project and put the solution in a «watch» mode

After updating and saving any project file, the build tasks will be triggered. Your web browser will be updated much faster than with the gulp serve task. This really saves a lot of (waiting) time!

Make use of fast-serve by using the ‘SharePoint Framework Toolkit’ in VS Code (extension)

Alternatively – and highly recommended! –, when developing SPFx solution within VS Code and using the SharePoint Framework Toolkit, fast-serve can be added to the project’s dependencies through the initial scaffolding process:

One (last) Word on this

Thank you Sergei 🙏! I’m really glad to have this great tool that saves me a lot of time when debugging (and updating) changes in my local SPFx project files. I highly recommend using it in any SPFx project!