{"id":20859005,"url":"https://github.com/s-kainet/spfx-fast-serve","last_synced_at":"2025-05-16T15:05:18.904Z","repository":{"id":41149984,"uuid":"247488521","full_name":"s-KaiNet/spfx-fast-serve","owner":"s-KaiNet","description":"Improve your SharePoint Framework development flow by speeding up the \"serve\" command :rocket:","archived":false,"fork":false,"pushed_at":"2025-02-17T22:10:26.000Z","size":4455,"stargazers_count":149,"open_issues_count":1,"forks_count":12,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-12T14:19:50.439Z","etag":null,"topics":["sharepoint-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s-KaiNet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-15T14:59:46.000Z","updated_at":"2025-04-08T12:49:25.000Z","dependencies_parsed_at":"2023-01-21T08:46:27.297Z","dependency_job_id":"7e67c529-c35b-4f8a-9beb-f52dc72e1260","html_url":"https://github.com/s-KaiNet/spfx-fast-serve","commit_stats":{"total_commits":147,"total_committers":2,"mean_commits":73.5,"dds":0.006802721088435382,"last_synced_commit":"4fb3e845a24ae684f1d1c20fa2febd327259369e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-KaiNet%2Fspfx-fast-serve","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-KaiNet%2Fspfx-fast-serve/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-KaiNet%2Fspfx-fast-serve/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-KaiNet%2Fspfx-fast-serve/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-KaiNet","download_url":"https://codeload.github.com/s-KaiNet/spfx-fast-serve/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578875,"owners_count":21127714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sharepoint-framework"],"created_at":"2024-11-18T04:48:21.863Z","updated_at":"2025-04-12T14:19:59.957Z","avatar_url":"https://github.com/s-KaiNet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :rocket: SPFx Fast Serve Tool  \n\n[![npm version](https://badge.fury.io/js/spfx-fast-serve.svg)](https://badge.fury.io/js/spfx-fast-serve)\n\nA 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`.\n\nCurious how it works under the hood? Read my [blog post here](https://spblog.net/post/2020/03/24/spfx-overclockers-or-how-significantly-speed-up-the-gulp-serve-command).\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e `spfx-fast-serve` version `4.x` (current) supports SPFx starting from version 1.17. Read more [here](#which-sharepoint-framework-versions-are-supported)\n\n## How to use\n\n1. `npm install spfx-fast-serve -g`\n2. Open a command line in a folder with your SharePoint Framework solution you want to speed up.\n3. Run `spfx-fast-serve` and follow instructions. In most cases you shouldn't do anything specific and the CLI \"just works\".\n4. Run `npm install`\n5. Run `npm run serve` and enjoy the incredible speed of `serve` command!\n\n## `fast-serve` CLI\n\nThe `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 `\u003cyour SPfx project\u003e/fast-serve/config.json`. The config file is not created by default, but you could create it using `fast-serve` CLI [commands](#fast-serve-commands).\n\n\u003e Since `fast-serve` is not a global CLI, but a part of the `spfx-fast-serve-helpers` module, you should use tools like [npx](https://docs.npmjs.com/cli/v10/commands/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.\n\n### `fast-serve` CLI options\n\n| option               | type    | defaults | description                                                                                                                                                                                                                                                                                     |\n|----------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `port`               | integer | 4321     | HTTP port to use to serve the bundles                                                                                                                                                                                                                                                           |\n| `memory`             | integer | 8192     | Memory limits for the dev server in MB                                                                                                                                                                                                                                                          |\n| `locale`             | string  | -        | Local code when running in a multi-language scenario, i.e. `--locale=nl-nl`                                                                                                                                                                                                                     |\n| `config`             | string  | -        | Serve configuration to run on a startup. It works exactly the same as the OOB `gulp serve --config=[config-name]`                                                                                                                                                                               |\n| `openUrl`            | string  | -        | URL to open on a startup. If empty, no URL will be opened. Supports SPFx {tenantDomain} placeholder                                                                                                                                                                                             |\n| `loggingLevel`       | enum    | normal   | Logging level, 'minimal' notifies about errors and new builds only, 'normal' adds bundle information, 'detailed' displays maximum information about each bundle                                                                                                                                 |\n| `fullScreenErrors`   | boolean | true     | Whether to show errors with a full-screen overlay on UI or not (only in console)                                                                                                                                                                                                                |\n| `isLibraryComponent` | boolean | false    | Should be true, when running inside library component project type                                                                                                                                                                                                                              |\n| `eslint`             | boolean | true     | When `true`, adds [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) to lint your code with `lintDirtyModulesOnly:true` option for performance                                                                                                                   |\n| `hotRefresh`         | boolean | false    | Enables webpack's [Hot Module Replacement](https://webpack.js.org/concepts/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](/docs/HMR.md)                                    |\n| `reactProfiling`     | boolean | false    | When `true`, enables react profiling mode through [React Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). By default profiling doesn't work in SPFx solutions (even in dev mode).                                     |\n| `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. |\n| `debug`              | boolean | false    | Enables debug mode for `fast-serve`                                                                                                                                                                                                                                                             |\n\nHere is a sample configuration:\n\n```json\n{\n  \"$schema\": \"https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.v2.schema.json\",\n  \"serve\": {\n    \"config\": \"my-config\",\n    \"fullScreenErrors\": false,\n    \"debug\": true\n  }\n}\n```\n\nIf 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):\n\n```bash\nfast-serve --config=my-config --fullScreenErrors=false --debug\n```\n\nIf you have the same option provided in both file and CLI, the CLI option will take the precedence.\n\n### `fast-serve` commands\n\n`fast-serve` CLI supports below commands:\n\n- `fast-serve webpack extend` - adds fast-serve webpack extensibility file to the project. Read more on webpack extensibility [here](#webpack-extensibility)\n- `fast-serve config add` - adds `fast-serve` configuration file to the project\n\n## Migration between SPFx versions\n\nThe 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).\n\nFor example, if your project is based on SPFx 1.17, then you have the below dependency:\n \u003e \"spfx-fast-serve-helpers\": \"~1.17.0\"\n\n 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):\n\u003e \"spfx-fast-serve-helpers\": \"~1.18.0\"\n\nReinstall all dependencies and that's it!\n\n## Webpack extensibility\n\nIf 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.  \n\nBy default, you don't have `webpack.extend.js` file. Run\n\n```bash\nnpx fast-serve webpack extend\n```\n\nto 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.\n\nYou can either provide custom `webpackConfig` object, which will be merged using [webpack-merge](https://github.com/survivejs/webpack-merge) module, or use `transformConfig` to even better control over configuration.\n\nCheck out [this sample](https://github.com/s-KaiNet/spfx-fast-serve/blob/master/samples/advanced/fast-serve/webpack.extend.js) to see how it works. The sample configures custom path aliases for SPFx.\n\n## Which SharePoint Framework versions are supported\n\nThe latest `spfx-fast-serve@4.x` version supports SPFx 1.17 and onwards.\n\nVersion `3.x` supports SPFx 1.4.1 and above. If you need to run the tool for SPFx \u003c 1.17, you could use `npx` tool for `npm` or `dlx` for `pnpm`:\n\n```bash\nnpx -p spfx-fast-serve@3.0.7 -- spfx-fast-serve\n```\n\n```bash\npnpm --package=spfx-fast-serve@3.0.7 dlx spfx-fast-serve\n```\n\nYou could also use [3.x branch](https://github.com/s-KaiNet/spfx-fast-serve/tree/3.x) to see the documentation for `3.x` version.\n\nSharePoint 2016 is **NOT** supported.\n\n## MS Teams Toolkit integration\n\nFollow [this guide](./docs/MS%20Teams%20Toolkit.md) to configure MS Teams Toolkit with `fast-serve`. Also checkout the [sample repository](https://github.com/s-KaiNet/fast-serve-teams-tk) where everything is configured.\n\n## `spfx-fast-serve` command options\n\n- `--force-install` - installs dependencies without asking for a confirmation\n\n## How it works\n\nThe 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:\n\n- all compilation are done in a memory with webpack, no additional \"copy\", \"prepare\", \"typescript\", \"whatever\" tasks.\n- incremental TypeScript compilation when a file is being changed. It means only necessary files are compiled, not everything.\n- asynchronous type checking and linting.\n\nAlso\n\n- live reloading for hosted workbench, MS Teams host, mobile devices (with ngrok serve)\n- debugging from VSCode with Chrome Debugger extension\n- supports WSL2\n- Hot Module Replacement (HMR) - experimental support\n- doesn't mess up your default SPFx build. If you have troubles, simply switch back to regular `gulp serve`\n- supports all major node package managers\n\n## NGROK serve plugin\n\n`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.\n\nRead more [here](/docs/NgrokServe.md) on how you can configure it.\n\n## Library components\n\nPlease use [this guide](/docs/LibraryComponents.md) to configure `spfx-fast-serve` with library components.\n\n## Privacy policy\n\n`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.\n\n## Having troubles? Please try to find the answer under [FAQs](/docs/FAQ.md) or raise an issue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-kainet%2Fspfx-fast-serve","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-kainet%2Fspfx-fast-serve","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-kainet%2Fspfx-fast-serve/lists"}