@servicetitan/docs-uikit 32.1.0 → 32.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/docs/BREAKING_CHANGES.mdx +1 -0
  2. package/docs/launchdarkly-service.mdx +1 -1
  3. package/docs/microfrontends/developing/authentication.mdx +91 -0
  4. package/docs/microfrontends/developing/developing.mdx +124 -0
  5. package/docs/microfrontends/developing/headless-bundle.mdx +62 -0
  6. package/docs/microfrontends/hosting.mdx +84 -0
  7. package/docs/microfrontends/microfrontends.mdx +45 -0
  8. package/docs/microfrontends/publishing.mdx +93 -0
  9. package/docs/microfrontends/sharing-dependencies.mdx +96 -0
  10. package/docs/microfrontends/troubleshooting.mdx +55 -0
  11. package/docs/startup/build.mdx +281 -8
  12. package/docs/startup/lint.mdx +23 -0
  13. package/docs/startup/mfe-publish.mdx +48 -11
  14. package/docs/startup/start.mdx +46 -1
  15. package/docs/startup/startup.mdx +5 -375
  16. package/docs/startup/test/jest.mdx +114 -0
  17. package/docs/startup/test/test.mdx +72 -0
  18. package/docs/startup/test/vitest.mdx +117 -0
  19. package/docs/web-components/headless-loader.mdx +2 -47
  20. package/docs/web-components/loader.mdx +2 -2
  21. package/package.json +2 -2
  22. package/docs/startup/test.mdx +0 -205
package/docs/startup/build.mdx CHANGED
@@ -6,14 +6,14 @@ Build packages for production to the `dist/bundle` folders. It bundles them in p
6
6
 
7
7
  ## Options
8
8
 
9
- | Option | Description |
10
- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
11
- | `--scope <glob>` | Include only packages with names matching the given glob. |
12
- | `--ignore <glob>` | Exclude packages with names matching the given glob. |
13
- | `--cdn-path <url>` | Specify the base path for all the assets within the application. |
14
- | `--stat` | Generate bundle report with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). Starting `v22.3.0` works for [MFEs](/docs/frontend/micro-frontends) too. |
15
- | `--code-coverage` | Add [instrumentation](https://github.com/JS-DevTools/coverage-istanbul-loader) to bundled code in order to collect code coverage |
16
- | `--use-tsc` | Use TSC for TypeScript compilation |
9
+ | Option | Description |
10
+ | :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11
+ | `--scope <glob>` | Include only packages with names matching the given glob. |
12
+ | `--ignore <glob>` | Exclude packages with names matching the given glob. |
13
+ | `--cdn-path <url>` | Specify the base path for all the assets within the application. |
14
+ | `--stat` | Generate bundle report with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). Starting `v22.3.0` works for [MFEs](../microfrontends) too. |
15
+ | `--code-coverage` | Add [instrumentation](https://github.com/JS-DevTools/coverage-istanbul-loader) to bundled code in order to collect code coverage |
16
+ | `--use-tsc` | Use TSC for TypeScript compilation |
17
17
 
18
18
  ## Build Steps
19
19
 
@@ -28,3 +28,276 @@ The `build` command executes these steps:
28
28
  :::note
29
29
  `startup` doesn't support dependencies between the Webpack bundles.
30
30
  :::
31
+
32
+ ## Package Setup
33
+
34
+ Because `startup` compiles and builds in separate steps, packages must export compiled Javascript instead of the TypeScript source files. E.g.,
35
+
36
+ ```json title="package.json"
37
+ {
38
+ "exports": "./dist/index.js",
39
+ "main": "./dist/index.js",
40
+ "typings": "./dist/index.d.ts"
41
+ }
42
+ ```
43
+
44
+ And, to ensure packages are compiled in the correct order, [TypeScript project references](https://www.typescriptlang.org/docs/handbook/project-references.html) must accurately describe the dependencies between packages. E.g.,
45
+
46
+ ```json title="tsconfig.json"
47
+ {
48
+ "references": [
49
+ { "path": "../component-a" },
50
+ { "path": "../component-b" },
51
+ { "path": "../component-c" }
52
+ ]
53
+ }
54
+ ```
55
+
56
+ :::note
57
+ The Webpack documentation suggests using a configuration that enters through `./src/index.ts`, and using `ts-loader` to process `.ts` and `.tsx` files. However, because `startup` precompiles Typescript, this is redundant and webpack must be configured to load the compiled Javascript.
58
+ :::
59
+
60
+ ## CSS Modules
61
+
62
+ `Startup` supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the `[name].module.{css,less,scss}` file naming convention. CSS Modules provide locally scoped class names that prevent global CSS collisions, making styles more predictable and easier to refactor.
63
+
64
+ ## SVG Transformation
65
+
66
+ By default, SVGs are loaded as assets. Depending on the file size, the asset is converted to a base64 URI string, or emitted as separate file. E.g.,
67
+
68
+ ```tsx
69
+ import MySVG from './my.svg';
70
+
71
+ function MyImage() {
72
+ return <img src={MySVG} />;
73
+ }
74
+ ```
75
+
76
+ ### Importing SVGs as React components
77
+
78
+ By default `startup` imports SVGs from `@servicetitan/anvil2` as React components. E.g.,
79
+
80
+ ```tsx
81
+ import { Button } from '@servicetitan/anvil2';
82
+ import CheckIcon from '@servicetitan/anvil2/assets/icons/material/round/check.svg';
83
+
84
+ export function CheckButton() {
85
+ return <Button icon={CheckIcon} />;
86
+ }
87
+ ```
88
+
89
+ To import SVGs from other sources as React components, append `?component` to the import statement. E.g.,
90
+
91
+ ```tsx
92
+ import { Button } from '@servicetitan/anvil2';
93
+ import CheckIcon from './assets/check.svg?component';
94
+
95
+ export function CheckButton() {
96
+ return <Button icon={CheckIcon} />;
97
+ }
98
+ ```
99
+
100
+ ### Importing Anvil 2 SVGs as assets
101
+
102
+ By default `startup` imports SVGs from `@servicetitan/anvil2` as React components.
103
+ To import an Anvil 2 SVG as an asset, append `?asset` to the import statement. E.g.,
104
+
105
+ ```tsx
106
+ import CheckIcon from '@servicetitan/anvil2/assets/icons/material/round/check.svg?asset';
107
+
108
+ function CheckImage() {
109
+ return <img src={CheckIcon} />;
110
+ }
111
+ ```
112
+
113
+ ## Configuration
114
+
115
+ ### Library packages
116
+
117
+ Set `cli.webpack` to `false` to disable Webpack for non-application packages, such as component and utility libraries.
118
+
119
+ ```json title="package.json"
120
+ {
121
+ "cli": {
122
+ "webpack": false
123
+ }
124
+ }
125
+ ```
126
+
127
+ ### Type Checking
128
+
129
+ Use package-specific `tsconfig.json` and `tsconfig.build.json` files to set or override type checking options. E.g.,
130
+
131
+ ```json title="tsconfig.json"
132
+ {
133
+ "extends": "@servicetitan/startup/tsconfig/base",
134
+ "compilerOptions": {
135
+ "outDir": "dist",
136
+ "rootDir": "src"
137
+ // Other type checking options (https://www.typescriptlang.org/tsconfig/)
138
+ },
139
+ "include": ["src/**/*"]
140
+ }
141
+ ```
142
+
143
+ Use `tsconfig.build.json` that extends from `tsconfig.json` to exclude tests, stories, and mocks from type checking. E.g.,
144
+
145
+ ```json title="tsconfig.build.json"
146
+ {
147
+ "extends": "./tsconfig.json",
148
+ "exclude": ["**/__tests__/*", "**/*.test.*", "**/__mocks__/*", "**/*.stories.*"],
149
+ "references": [
150
+ { "path": "../feature-a" },
151
+ { "path": "../feature-b" },
152
+ { "path": "../feature-c" }
153
+ ]
154
+ }
155
+ ```
156
+
157
+ :::caution
158
+ Project references must be duplicated in `tsconfig.build.json` because [references are not inherited](https://github.com/microsoft/TypeScript/issues/27098).
159
+ :::
160
+
161
+ ### TypeScript compilation (SWC)
162
+
163
+ :::info
164
+ `Startup` only maps a subset of TypeScript settings from `tsconfig.json` to SWC options. See [cliOptions](https://github.com/search?q=repo%3Aservicetitan%2Fuikit+%22cliOptions%3A%22+-path%3A**%2F*.test.ts&type=code) and [swcOptions](https://github.com/search?q=repo%3Aservicetitan%2Fuikit+%22swcOptions%3A%22+-path%3A**%2F*.test.ts&type=code) for the details.
165
+ :::
166
+
167
+ Use `cli.swc-compile-package` to set or override SWC options. E.g.,
168
+
169
+ ```json title="package.json"
170
+ {
171
+ "cli": {
172
+ "swc-compile-package": {
173
+ "cliOptions": {
174
+ // CLI options (https://swc.rs/docs/usage/cli)
175
+ },
176
+ "swcOptions": {
177
+ // Compilation options (https://swc.rs/docs/configuration/compilation)
178
+ // Module options (https://swc.rs/docs/configuration/modules)
179
+ }
180
+ }
181
+ }
182
+ }
183
+ ```
184
+
185
+ ### TypeScript compilation (TSC)
186
+
187
+ :::caution
188
+ Compilation via TSC is deprecated.
189
+ :::
190
+
191
+ Use package-specific `tsconfig.json` and `tsconfig.build.json` files to set or override compiler options. See [Type checking](#type-checking) for more information.
192
+
193
+ ### Minimization
194
+
195
+ By default `startup` configures webpack to minimize production bundles conservatively,
196
+ so that projects gain the benefits of reduced bundle sizes while retaining the highest
197
+ fidelity for source map debugging.
198
+ It uses [TerserWebpackPlugin](https://webpack.js.org/plugins/terser-webpack-plugin) to minimize JS bundles
199
+ and [CssMinimizerWebpackPlugin](https://webpack.js.org/plugins/css-minimizer-webpack-plugin)
200
+ to minimize CSS bundles.
201
+
202
+ - To turn off minimizing, set `cli.webpack.minify.js` or `cli.webpack.minify.css`, or both, to `false`.
203
+ - To override the default Terser options set `cli.webpack.minify.js` to an object containing
204
+ [`terserOptions`](https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions).
205
+ - To override the default CssMinimizerWebpackPlugin options, set `cli.webpack.minify.css` to an object containing
206
+ [CssMinimizerWebpackPlugin options](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options).
207
+
208
+ For example,
209
+
210
+ ```json title="package.json"
211
+ {
212
+ "cli": {
213
+ "webpack": {
214
+ "minify": {
215
+ "js": {
216
+ // terser-webpack-plugin terserOptions
217
+ // https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions
218
+ },
219
+ "css": {
220
+ // css-minimizer-webpack-plugin options
221
+ // https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#options
222
+ }
223
+ }
224
+ }
225
+ }
226
+ }
227
+ ```
228
+
229
+ ### Webpack
230
+
231
+ To further customize Webpack settings, create files named `webpack.*.config.js` in the package's root directory (the directory with its `package.json`).
232
+
233
+ Use `webpack.dev.config.js` to customize development builds and use `webpack.prod.config.js` to customize production builds. In the config file,
234
+
235
+ - Import `createWebpackConfig` from `@servicetitan/startup`.
236
+ - Call it with the custom Webpack options.
237
+ - Return the result as the default export.
238
+
239
+ For example, to customize the Webpack's **output** path,
240
+
241
+ ```js title="webpack.dev.config.js"
242
+ const path = require('path');
243
+ const { createWebpackConfig } = require('@servicetitan/startup');
244
+
245
+ module.exports = createWebpackConfig({
246
+ configuration: {
247
+ mode: 'development',
248
+ output: { path: path.resolve(__dirname, '../../wwwroot') },
249
+ },
250
+ });
251
+ ```
252
+
253
+ :::caution
254
+ For MFEs the approach is slightly different, see [Customizing Webpack for MFEs](#customizing-webpack-for-mfes)
255
+ :::
256
+
257
+ #### createWebpackConfig
258
+
259
+ `createWebpackConfig` takes an object with two fields, `configuration` and `plugins`.
260
+
261
+ | Field | Description |
262
+ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
263
+ | `configuration` | Merged with the defaults to produce the final webpack configuration. For production builds, **configuration.mode** must be set to "production". For development builds, set it to "development". |
264
+ | `plugins` | `HtmlWebpackPlugin` and `MiniCssExtractPlugin` subkeys are merged with the default configurations for the corresponding plugins. (Note, `MiniCssExtractPlugin` only applies to production builds.) |
265
+
266
+ For example,
267
+
268
+ ```js title="webpack.prod.config.js"
269
+ const { createWebpackConfig } = require('@servicetitan/startup');
270
+
271
+ module.exports = createWebpackConfig({
272
+ configuration: {
273
+ mode: 'production',
274
+ },
275
+ plugins: {
276
+ HtmlWebpackPlugin: {
277
+ favicon: './favicon.ico',
278
+ title: 'Enterprise Hub',
279
+ },
280
+ },
281
+ });
282
+ ```
283
+
284
+ :::caution
285
+ Remember, you must set `configuration.mode` to "production" in `webpack.prod.config.js`.
286
+ :::
287
+
288
+ #### Customizing Webpack for MFEs
289
+
290
+ Because `startup` runs Webpack multiple times to create MFEs bundles, a slightly different approach is required for MFEs.
291
+ Don't call `createWebpackConfig` and just return an object with the same `configuration` and `plugins` fields described [above](#createwebpackconfig).
292
+ E.g.,
293
+
294
+ ```js title="webpack.dev.config.js"
295
+ const path = require('path');
296
+
297
+ module.exports = {
298
+ configuration: {
299
+ mode: 'development',
300
+ output: { path: path.resolve(__dirname, '../../wwwroot') },
301
+ },
302
+ };
303
+ ```
package/docs/startup/lint.mdx CHANGED
@@ -24,3 +24,26 @@ npx startup lint -- packages/desktop/app/modules/{lead,inventory}/
24
24
  | `--scope <glob>` | Include only packages with names matching the given glob. |
25
25
  | `--ignore <glob>` | Exclude packages with names matching the given glob. |
26
26
  | `--fix` | Fix linting issues. |
27
+
28
+ ## Configuration
29
+
30
+ Use `cli.lint` to set or override `ESLint` and `Stylelint` options. E.g,
31
+
32
+ ```json title="package.json"
33
+ {
34
+ "cli": {
35
+ "lint": {
36
+ "eslint": {
37
+ // ESLint options (https://eslint.org/docs/user-guide/configuring)
38
+ },
39
+ "stylelint": {
40
+ // Stylelint options (https://stylelint.io/user-guide/configure)
41
+ }
42
+ }
43
+ }
44
+ }
45
+ ```
46
+
47
+ :::caution
48
+ Because `lint` is a global command that runs from the workspace root, `ESLint` and `Stylelint` configurations must be in the workspace's root `package.json`.
49
+ :::
package/docs/startup/mfe-publish.mdx CHANGED
@@ -6,18 +6,22 @@ This is an umbrella command for both publishing and unpublishing (cleaning up) M
6
6
 
7
7
  ## Publishing options
8
8
 
9
- | Option | Description |
10
- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11
- | `--dry` | Log what the command would do without actually publishing anything. |
12
- | `--branch <string>` | Optional branch name. The current branch name is used if no value is specified. The branch name is used in constructing the build version in case `--build` is not specified. |
13
- | `--build <glob>` | Optional build version that normally should not be specified. Defaults to `<branch_name>.<commit_hash>`. For example, if git commit `bdac90f5` is published from branch `next`, the build version is`next.bdac90f5`, and the full version is `0.0.0-next.bdac90f5`. This ensures each release has a unique version with no collisions. |
14
- | `--force` | Forces publishing the package when no configuration was found for the specified branch (`--branch` or current branch). |
15
- | `--upload-sourcemaps`, `--no-upload-sourcemaps` | Whether or not to [upload sourcemaps](#sourcemaps) to Datadog. Defaults to uploading sourcemaps. |
16
- | `--tag <string>` | The [tag](https://docs.npmjs.com/cli/v7/commands/npm-publish#tag) to assign to the published version. Defaults to the tag associated with the branch from the custom [branch config](#branch-configs) or, if there is no custom branch config, from the [default branch config](https://github.com/servicetitan/uikit/blob/master/packages/startup/src/utils/get-branch-configs.ts#L3). For example, by default a package published from the `master` branch is tagged `prod`. Becasue NPM v11 requires pre-release versions to have a tag, if there is no custom or default tag for the branch, the package is tagged "latest". |
9
+ | Option | Description |
10
+ | :---------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11
+ | `--dry` | Log what the command would do without actually publishing anything. |
12
+ | `--branch <string>` | Optional branch name. The current branch name is used if no value is specified. The branch name is used in constructing the build version in case `--build` is not specified. |
13
+ | `--build <glob>` | Optional build version that normally should not be specified. Defaults to `<branch_name>.<commit_hash>`. For example, if git commit `bdac90f5` is published from branch `next`, the build version is`next.bdac90f5`, and the full version is `0.0.0-next.bdac90f5`. This ensures each release has a unique version with no collisions. |
14
+ | `--force` | Forces publishing the package when no configuration was found for the specified branch (`--branch` or current branch). |
15
+ | `--upload-sourcemaps`, `--no-upload-sourcemaps` | Whether or not to [upload sourcemaps](#sourcemaps) to Datadog. Defaults to uploading sourcemaps. |
16
+ | `--tag <string>` | The [tag](https://docs.npmjs.com/cli/v7/commands/npm-publish#tag) to assign to the published version. Defaults to the tag associated with the branch from the custom [branch config](#branch-configs) or, if there is no custom branch config, from the [default branch config](https://github.com/servicetitan/uikit/blob/master/packages/startup/src/utils/get-branch-configs.ts#L3). For example, by default a package published from the `master` branch is tagged `prod`. |
17
+
18
+ :::danger
19
+ Do not use the `@latest` tag for production deployments because it could be assigned unintentionally. NPM v11 requires all pre-release versions to have a tag and, if you don't specify a tag and `mfe-publish` can't infer a tag from the branch name, the pre-release will be tagged "latest".
20
+ :::
17
21
 
18
22
  ## Unpublishing options
19
23
 
20
- | Option | Descripiton |
24
+ | Option | Description |
21
25
  | :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
22
26
  | `--clean` | Instructs `mfe-publish` to remove old versions instead of publishing. |
23
27
  | `--all` | Remove old versions associated with all [recognized branches](#branch-configs). This overrides `--branch`. |
@@ -27,20 +31,25 @@ This is an umbrella command for both publishing and unpublishing (cleaning up) M
27
31
 
28
32
  ## Branch configs
29
33
 
34
+ ✨ New in **v28.1.1** ✨
35
+
30
36
  By default `mfe-publish` only publishes from a few [recognized branches](https://github.com/servicetitan/uikit/blob/master/packages/startup/src/utils/get-branch-configs.ts#L3) and you must use `--force` to publish from others.
31
37
 
32
38
  To customize the recognized branches for an MFE set `cli.web-component.branches` in the MFE's package.json to an object that maps branch names to the associated tag. For example,
33
39
 
34
40
  ```json
41
+ {
35
42
  "cli": {
36
43
  "web-component": {
37
44
  "branches": {
38
- "qa": { "publishTag": "qa" },
39
- "staging": { "publishTag": "staging" },
45
+ "develop": { "publishTag": "dev" },
46
+ "stage": { "publishTag": "stage" },
47
+ "next": { "publishTag": "next" },
40
48
  "master": { "publishTag": "prod" }
41
49
  }
42
50
  }
43
51
  }
52
+ }
44
53
  ```
45
54
 
46
55
  ### Properties
@@ -50,6 +59,29 @@ To customize the recognized branches for an MFE set `cli.web-component.branches`
50
59
  | `publishTag` | `string` | The tag to use when publishing from the branch. |
51
60
  | `uploadSourcemaps` | `boolean` | Whether to upload sourcemaps to Datadog. Defaults to `true`. |
52
61
 
62
+ ### Sharing branch configurations
63
+
64
+ When a repo contains multiple MFE that share the same branches, you can set `cli.web-component` to the relative path to a file that exports the common configuration object. For example,
65
+
66
+ ```json title="package.json"
67
+ {
68
+ "cli": {
69
+ "web-component": "../../config/web-component.js"
70
+ }
71
+ }
72
+ ```
73
+
74
+ ```js title="config/web-component.js"
75
+ module.exports = {
76
+ branches: {
77
+ develop: { publishTag: 'dev' },
78
+ stage: { publishTag: 'stage' },
79
+ next: { publishTag: 'next' },
80
+ master: { publishTag: 'prod' },
81
+ },
82
+ };
83
+ ```
84
+
53
85
  ## Sourcemaps
54
86
 
55
87
  ✨ New in **v31.5.0** ✨
@@ -71,3 +103,8 @@ If `DATADOG_API_KEY` is not provided `mfe-publish` fails with an error. In CI en
71
103
  :::tip
72
104
  Use `--no-upload-sourcemaps` to prevent `mfe-publish` from attempting to upload sourcemaps, for example, for pre-release versions. See [Publishing options](#publishing-options).
73
105
  :::
106
+
107
+ ## See Also
108
+
109
+ - [Example `mfe-publish` workflow](https://github.com/servicetitan/frontend-example/blob/master/.github/workflows/mfe-publish.yml)
110
+ - [Example `mfe-publish --clean` workflow](https://github.com/servicetitan/frontend-example/blob/master/.github/workflows/mfe-clean.yml)
package/docs/startup/start.mdx CHANGED
@@ -2,7 +2,16 @@
2
2
  title: start
3
3
  ---
4
4
 
5
- Runs package in the development mode. Applications will be hosted on sequential free ports starting from 8080. Pages will automatically reload on changes to the code.
5
+ Serves applications and [MFEs](../microfrontends) during development, watches source files, and automatically reloads pages on changes.
6
+
7
+ :::tip
8
+ To serve an application without `start`, [build](./build) it, then point any static http server to the output **bundle** directory, where the browser will find `index.html`. For example, to serve with [`http-server`](https://www.npmjs.com/package/http-server)
9
+
10
+ ```sh
11
+ npx -yes http-server packages/application/dist/bundle
12
+ ```
13
+
14
+ :::
6
15
 
7
16
  ## Options
8
17
 
@@ -18,3 +27,39 @@ Runs package in the development mode. Applications will be hosted on sequential
18
27
  The `start` command executes the same steps as the `build` command, then watches for changes and automatically reruns each step as needed.
19
28
 
20
29
  See [Build Steps](./build#build-steps).
30
+
31
+ ## Configuration
32
+
33
+ ### Port
34
+
35
+ Use `cli.webpack.port` to select the port to use for a package. By default, packages are served from the first available port starting from 8080.
36
+
37
+ ```json title="package.json"
38
+ {
39
+ "cli": {
40
+ "webpack": {
41
+ "port": 8888
42
+ }
43
+ }
44
+ }
45
+ ```
46
+
47
+ ### DevServer
48
+
49
+ Use `cli.webpack.devServer` to set or override `webpack-dev-server` options.
50
+
51
+ ```json title="package.json"
52
+ {
53
+ "cli": {
54
+ "webpack": {
55
+ "devServer": {
56
+ // webpack-dev-server options (https://webpack.js.org/configuration/dev-server/#devserver)
57
+ }
58
+ }
59
+ }
60
+ }
61
+ ```
62
+
63
+ :::tip
64
+ Set `cli.webpack.devServer` to `false` to disable `webpack-dev-server` altogether.
65
+ :::