diff --git a/README.md b/README.md index 5b225fd..3889c61 100755 --- a/README.md +++ b/README.md @@ -253,13 +253,46 @@ With this `{rootDir}/src/ui/tsconfig.json`: ##### Dev build -- `devServer` (`Object`) — webpack dev server options. +- `devServer` (`DevServerConfig`) — [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) options with app-builder-specific settings. All options are passed to the underlying dev server and can override defaults. + + App-builder-specific options: + - `ipc` (`string`) — the Unix socket to listen to. If `ipc` and `port` are not defined, then the socket `{rootDir}/dist/run/client.sock` is used. - `port` (`number | true`) — specify a port number to listen for requests on. If `true`, the free port will be selected automatically. - `webSocketPath` (`string`) — tells clients connected to devServer to use the provided path to connect. Default is `${publicPathPrefix}/build/sockjs-node`. - `webSocketClientPort` (`number`) - tells clients to connect to devServer using this port from a browser. Default is `${devServer.port}` - `type` (`'https'`) — allow to serve over HTTPS. - `options` (`import('https').ServerOptions`) — allow to provide your own certificate. + - `writeToDisk` (`boolean | (targetPath: string) => boolean`) — write dev middleware output to disk. + + Commonly used [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) options: + + - `host` (`string`) — hostname to bind the server to. Default is `'0.0.0.0'`. + - `proxy` (`ProxyConfigArray`) — proxy configuration for API requests. [more](https://webpack.js.org/configuration/dev-server/#devserverproxy) + - `historyApiFallback` (`boolean | ConnectHistoryApiFallbackOptions`) — enable SPA fallback for client-side routing. [more](https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback) + - `client` (`boolean | ClientConfiguration`) — browser client settings. [more](https://webpack.js.org/configuration/dev-server/#devserverclient) + - `overlay` (`boolean | {errors?: boolean, warnings?: boolean, runtimeErrors?: boolean}`) — show compile errors and warnings in the browser overlay. + + Example: + + ```typescript + import {defineConfig} from '@gravity-ui/app-builder'; + + export default defineConfig({ + client: { + devServer: { + port: true, + host: 'localhost', + historyApiFallback: true, + proxy: [{context: ['/api'], target: 'http://localhost:3000'}], + client: { + overlay: false, + }, + }, + }, + }); + ``` + - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions) - `watchPackages` (`boolean`) - watch all changes in `node_modules`. - `reactRefresh` (`false | (options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions`) — disable or configure `react-refresh` in dev mode, [more](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md#options) diff --git a/src/common/models/index.ts b/src/common/models/index.ts index d1ac4e1..a2dd084 100755 --- a/src/common/models/index.ts +++ b/src/common/models/index.ts @@ -11,7 +11,10 @@ import type { } from '@rspack/core'; import type * as Babel from '@babel/core'; import type * as Swc from '@swc/core'; -import type {ServerConfiguration} from 'webpack-dev-server'; +import type { + ServerConfiguration, + Configuration as WebpackDevServerConfiguration, +} from 'webpack-dev-server'; import type {Options as CircularDependenciesOptions} from 'circular-dependency-plugin'; import type {Config as SvgrConfig} from '@svgr/core'; import type {ForkTsCheckerWebpackPluginOptions} from 'fork-ts-checker-webpack-plugin/lib/plugin-options'; @@ -37,15 +40,45 @@ export interface Entities { keys: string[]; } -interface DevServerConfig { +/** + * Dev server configuration. + * Extends [webpack-dev-server options](https://webpack.js.org/configuration/dev-server/) + * with app-builder-specific settings. + */ +export type DevServerConfig = Omit< + WebpackDevServerConfiguration, + 'port' | 'server' | 'devMiddleware' | 'ipc' +> & { + /** + * Unix socket to listen on. + * If `ipc` and `port` are not defined, the socket `{rootDir}/dist/run/client.sock` is used. + */ ipc?: string; + /** + * Port number to listen on. If `true`, a free port is selected automatically. + */ port?: number | true; + /** + * WebSocket path for HMR clients. Default is `/${publicPath}/sockjs-node`. + */ webSocketPath?: string; + /** + * Port for browser WebSocket connection. Default is `devServer.port`. + */ webSocketClientPort?: number; + /** + * Serve over HTTPS. + */ type?: 'https'; + /** + * HTTPS server options (e.g. custom certificate). + */ options?: import('https').ServerOptions; + /** + * Write dev middleware output to disk. + */ writeToDisk?: boolean | ((targetPath: string) => boolean); -} +}; interface ContextReplacement { 'highlight.js'?: string[]; diff --git a/src/index.ts b/src/index.ts index 092b029..5d296d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ export {defineConfig} from './common/models'; export {babelPreset} from './common/babel'; export type { + DevServerConfig, ProjectConfig, ServiceConfig, LibraryConfig,