spfx-fast-serve new feature: hot module replacement (aka HMR)

28 July 2021 Sergei-Sergeev SharePoint Framework

A few weeks ago spfx-fast-serve received an interesting update:

  • hot module replacement (known as HMR)

Read further to learn more about how it works.

What is spfx-fast-serve?

A command line utility, which modifies your SharePoint Framework solution, so that it runs continuous serve command as fast as possible.

Hot module replacement

Let's start with a bit of theory here. Usually, when you do a front-end development, you have a running process in a watch mode, which inspects your files. When you save a file, the process rebuilds your source code and refreshes a page in a browser. Sometimes full page refresh is a time-consuming process and it will be a lot faster if you can just update part of your application (where you made changes). This is exactly how HMR works - instead of performing a full-page refresh, it applies the partial update to a page and replaces only modules you changed.

This is a quote from webpack documentation about HMR:

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

  • Retain application state which is lost during a full reload.
  • Save valuable development time by only updating what's changed.
  • Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.

Now, this feature is available for SPFx through fast-serve. However, this feature at the moment is considered experimental (read further to find out why). Let's see how it works first, then read about prerequisites for SPFx and few things to keep in mind. 

How to works

You should add a new configuration setting called "hotRefresh" and set it to true. In this mode, fast-serve will enable HMR for the webpack. Here is how it looks in action (see how it doesn't refresh a page but instead updates the page in runtime):

Prerequisites

This feature works only under certain conditions. 

SPFx 1.12 +

It works only for SPFx starting from version 1.12 and above.

TypeScript 4+

By default, SPFx 1.12 is shipped with TypeScrpt 3.7. To update to TypeScript 4 you should uninstall dev dependency "@microsoft/rush-stack-compiler-3.7" and install 4.2 instead:

npm uninstall @microsoft/rush-stack-compiler-3.7 --save-dev
npm install @microsoft/rush-stack-compiler-4.2 --save-dev

  Then update tsconfig.json so that it extends the 4.2 version instead of 3.7:

"extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",

TypeScript 4+ doesn't support tslint (tslint is deprecated). Thus you should disable the tslint task in your gulpfile.js:

build.tslintCmd.enabled = false;

Otherwise, the build will fail. As an alternative to tslint, you can use eslint.

Experimental 

At the time being this feature is marked as experimental, because I can't guarantee that it works on all different cases and configurations. Also, it relies on some node modules, which are still in development. And the last thing, it requires TypeScript 4+ which is not the default for SPFx yet. Thus my recommendation is to try it if you wish. If it works for your project - then use it. In future versions of SPFx, this feature should be more stable. 

Full page refresh

Sometimes it performs a full page refresh instead of a partial update. That's ok because the HMR feature is smart enough to detect when a partial update is available. If you component depends on the external state or performs HTTP requests, then most likely a full-page refresh will be executed. Partial update works well only for small single-purpose components without lots of dependencies. 

Title image credits - Business vector created by freepik - www.freepik.com