spfx-fast-serve
v4.0.1
Published
Improve your SharePoint Framework development by speeding up 'serve' command
Downloads
1,770
Maintainers
Readme
:rocket: SPFx Fast Serve Tool
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
version4.x
(current) supports SPFx starting from version 1.17. Read more here
How to use
npm install spfx-fast-serve -g
- Open a command line in a folder with your SharePoint Framework solution you want to speed up.
- Run
spfx-fast-serve
and follow instructions. In most cases you shouldn't do anything specific and the CLI "just works". - Run
npm install
- Run
npm run serve
and enjoy the incredible speed ofserve
command!
fast-serve
CLI
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 thespfx-fast-serve-helpers
module, you should use tools like npx to runfast-serve
from command line. So instead offast-serve [options]
, you should runnpx fast-serve [options]
. When running from npm scripts (package.json
) you don't neednpx
, as everything is resolved internally.
fast-serve
CLI options
| option | type | defaults | description |
|----------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| port
| integer | 4321 | HTTP port to use to serve the bundles |
| memory
| integer | 8192 | Memory limits for the dev server in MB |
| locale
| string | - | Local code when running in a multi-language scenario, i.e. --locale=nl-nl
|
| config
| string | - | Serve configuration to run on a startup. It works exactly the same as the OOB gulp serve --config=[config-name]
|
| openUrl
| string | - | URL to open on a startup. If empty, no URL will be opened. Supports SPFx {tenantDomain} placeholder |
| loggingLevel
| enum | normal | Logging level, 'minimal' notifies about errors and new builds only, 'normal' adds bundle information, 'detailed' displays maximum information about each bundle |
| fullScreenErrors
| boolean | true | Whether to show errors with a full-screen overlay on UI or not (only in console) |
| isLibraryComponent
| boolean | false | Should be true, when running inside library component project type |
| eslint
| boolean | true | When true
, adds eslint-webpack-plugin to lint your code with lintDirtyModulesOnly:true
option for performance |
| hotRefresh
| boolean | false | Enables webpack's Hot Module Replacement (HMR). This feature is considered as experimental, meaning that you can try and use it if it works well for your project. Read more here |
| reactProfiling
| boolean | false | When true
, enables react profiling mode through React Chrome extension. By default profiling doesn't work in SPFx solutions (even in dev mode). |
| containers
| boolean | false | Explicitly enables containerized environment support. By default, fast-serve
automatically detects a containerized environment (like Docker) and applies needed configuration. But if it doesn't work for you, you can explicitly disable or enable support for containers using this option. |
| debug
| boolean | false | Enables debug mode for fast-serve
|
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
commands
fast-serve
CLI supports below commands:
fast-serve webpack extend
- adds fast-serve webpack extensibility file to the project. Read more on webpack extensibility herefast-serve config add
- addsfast-serve
configuration file to the project
Migration between SPFx versions
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!
Webpack extensibility
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.
Which SharePoint Framework versions are supported
The latest [email protected]
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 [email protected] -- spfx-fast-serve
pnpm [email protected] dlx spfx-fast-serve
You could also use 3.x branch to see the documentation for 3.x
version.
SharePoint 2016 is NOT supported.
How it works
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
NGROK serve plugin
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.
Library components
Please use this guide to configure spfx-fast-serve
with library components.
Privacy policy
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.