A command line utility, which modifies your SharePoint Framework solution, so that it runs continuous serve command 10-15x times faster, than the regular gulp serve.

Curious how it works under the hood? Read my blog post here.

IMPORTANT

spfx-fast-serve version 4.x (current) supports SPFx starting from version 1.17. Read more here

1. npm install spfx-fast-serve -g
2. Open a command line in a folder with your SharePoint Framework solution you want to speed up.
3. Run spfx-fast-serve and follow instructions. In most cases you shouldn't do anything specific and the CLI "just works".
4. Run npm install
5. Run npm run serve and enjoy the incredible speed of serve command!

The spfx-fast-serve command simply adds necessary things to run your serve faster. Among them, it installs spfx-fast-serve-helpers NodeJS package. The package contains the fast-serve CLI, which does all the magic "serve" things. Each CLI option could be provided as a command line parameter or could be stored inside the fast-serve configuration file under <your SPfx project>/fast-serve/config.json. The config file is not created by default, but you could create it using fast-serve CLI commands.

Since fast-serve is not a global CLI, but a part of the spfx-fast-serve-helpers module, you should use tools like npx to run fast-serve from command line. So instead of fast-serve [options], you should run npx fast-serve [options]. When running from npm scripts (package.json) you don't need npx, as everything is resolved internally.

Here is a sample configuration:

{
  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.v2.schema.json",
  "serve": {
    "config": "my-config",
    "fullScreenErrors": false,
    "debug": true
  }
}

If you call fast-serve with the above configuration file, it will be the equivalent of calling the CLI with the below parameters (taken from file):

fast-serve --config=my-config --fullScreenErrors=false --debug

If you have the same option provided in both file and CLI, the CLI option will take the precedence.

fast-serve CLI supports below commands:

• fast-serve webpack extend - adds fast-serve webpack extensibility file to the project. Read more on webpack extensibility here
• fast-serve config add - adds fast-serve configuration file to the project

The migration is as easy as just changing the version of spfx-fast-serve-helpers in your package.json to match the corresponding SPFx minor version (do not change the patch version).

For example, if your project is based on SPFx 1.17, then you have the below dependency:

"spfx-fast-serve-helpers": "~1.17.0"

To migrate fast-serve to SPFx 1.18 you just need to change it like this (patch version should be 0, we change only minor version):

"spfx-fast-serve-helpers": "~1.18.0"

Reinstall all dependencies and that's it!

If you use custom webpack loaders or other webpack modifications via build.configureWebpack.mergeConfig feature, you should manually apply them to webpack.extend.js file created by the CLI to make everything work. Apply only those webpack modifications, which work on a regular gulp serve command, since spfx-fast-serve works only in development mode.

By default, you don't have webpack.extend.js file. Run

npx fast-serve webpack extend

to create it. In this file you can put your own logic for webpack, it will not be overwritten by the subsequent spfx-fast-serve calls.

You can either provide custom webpackConfig object, which will be merged using webpack-merge module, or use transformConfig to even better control over configuration.

Check out this sample to see how it works. The sample configures custom path aliases for SPFx.

The latest spfx-fast-serve@4.x version supports SPFx 1.17 and onwards.

Version 3.x supports SPFx 1.4.1 and above. If you need to run the tool for SPFx < 1.17, you could use npx tool for npm or dlx for pnpm:

npx -p spfx-fast-serve@3.0.7 -- spfx-fast-serve

pnpm --package=spfx-fast-serve@3.0.7 dlx spfx-fast-serve

You could also use 3.x branch to see the documentation for 3.x version.

SharePoint 2016 is NOT supported.

The tool adds necessary files to run your own webpack based build with webpack dev server. Technically it's a custom webpack build, which produces the same output files as SharePoint Framework build pipeline, but does it a lot faster, because of a number of improvements:

• all compilation are done in a memory with webpack, no additional "copy", "prepare", "typescript", "whatever" tasks.
• incremental TypeScript compilation when a file is being changed. It means only necessary files are compiled, not everything.
• asynchronous type checking and linting.

Also

• live reloading for hosted workbench, MS Teams host, mobile devices (with ngrok serve)
• debugging from VSCode with Chrome Debugger extension
• supports WSL2
• Hot Module Replacement (HMR) - experimental support
• doesn't mess up your default SPFx build. If you have troubles, simply switch back to regular gulp serve
• supports all major node package managers

spfx-fast-serve supports ngrok as a proxy between webpack dev server and SharePoint. This is possible through the NgrokServePlugin webpack plugin. This option allows you to test your SPFx solution live on mobile devices in development mode.

Read more here on how you can configure it.

Please use this guide to configure spfx-fast-serve with library components.

spfx-fast-serve tracks every run using "fast serve" option. The "run" data includes time, when you run npm run serve and irreversible hash of computer name (to track unique computers). It does NOT collect nor store any personal, computer, network or project information. "Run" data needed to analyze, how many runs using "fast serve" scenario we have per day\month\year and what is the trend. Based on the data I can make a decision whether to further invest time into this project or not.