feat(angular-rspack): support host option for the dev server

Author: leosvelperez

e2e/fixtures/rspack-csr-css/rspack.config.js

@@ -23,6 +23,7 @@ module.exports = () => {
           tsConfig: './tsconfig.app.json',
           skipTypeChecking: false,
           devServer: {
+            host: '127.0.0.1',
             port: 8080,
             proxyConfig: './proxy.conf.json',
           },

packages/angular-rspack/src/lib/config/create-config.ts

@@ -198,8 +198,8 @@ export async function _createConfig(
         allowedHosts: 'auto',
         client: {
           webSocketURL: {
-            hostname: 'localhost',
-            port: normalizedOptions.devServer?.port ?? 4200,
+            hostname: normalizedOptions.devServer.host,
+            port: normalizedOptions.devServer.port,
           },
           overlay: {
             errors: true,
@@ -208,7 +208,8 @@ export async function _createConfig(
           },
           reconnect: true,
         },
-        port: normalizedOptions.devServer?.port ?? 4200,
+        host: normalizedOptions.devServer.host,
+        port: normalizedOptions.devServer.port,
         hot: false,
         liveReload: true,
         watchFiles: ['./src/**/*.*', './public/**/*.*'],
@@ -221,18 +222,18 @@ export async function _createConfig(
         },
         server: {
           options:
-            normalizedOptions.devServer?.sslKey &&
-            normalizedOptions.devServer?.sslCert
+            normalizedOptions.devServer.sslKey &&
+            normalizedOptions.devServer.sslCert
               ? {
                   key: resolve(root, normalizedOptions.devServer.sslKey),
                   cert: resolve(root, normalizedOptions.devServer.sslCert),
                 }
               : {},
-          type: normalizedOptions.devServer?.ssl ? 'https' : 'http',
+          type: normalizedOptions.devServer.ssl ? 'https' : 'http',
         },
         proxy: await getProxyConfig(
           root,
-          normalizedOptions.devServer?.proxyConfig
+          normalizedOptions.devServer.proxyConfig
         ),
       },
       optimization: {
@@ -323,8 +324,8 @@ export async function _createConfig(
       allowedHosts: 'auto',
       client: {
         webSocketURL: {
-          hostname: 'localhost',
-          port: options.devServer?.port ?? 4200,
+          hostname: normalizedOptions.devServer.host,
+          port: normalizedOptions.devServer.port,
         },
         overlay: {
           errors: true,
@@ -343,29 +344,31 @@ export async function _createConfig(
       devMiddleware: {
         writeToDisk: (file) => !file.includes('.hot-update.'),
       },
-      port: options.devServer?.port ?? 4200,
+      host: normalizedOptions.devServer.host,
+      port: normalizedOptions.devServer.port,
       server: {
         options:
-          normalizedOptions.devServer?.sslKey &&
-          normalizedOptions.devServer?.sslCert
+          normalizedOptions.devServer.sslKey &&
+          normalizedOptions.devServer.sslCert
             ? {
                 key: resolve(root, normalizedOptions.devServer.sslKey),
                 cert: resolve(root, normalizedOptions.devServer.sslCert),
               }
             : {},
-        type: normalizedOptions.devServer?.ssl ? 'https' : 'http',
+        type: normalizedOptions.devServer.ssl ? 'https' : 'http',
       },
       proxy: await getProxyConfig(
         root,
-        normalizedOptions.devServer?.proxyConfig
+        normalizedOptions.devServer.proxyConfig
       ),
       onListening: (devServer) => {
         if (!devServer) {
           throw new Error('@rspack/dev-server is not defined');
         }
 
         const port =
-          (devServer.server?.address() as { port: number })?.port ?? 4200;
+          (devServer.server?.address() as { port: number })?.port ??
+          normalizedOptions.devServer.port;
         console.log('Listening on port:', port);
       },
     } as DevServer,

packages/angular-rspack/src/lib/config/create-config.unit.test.ts

@@ -112,6 +112,7 @@ describe('createConfig', () => {
                 globalScripts: scripts,
                 globalStyles: styles,
                 devServer: {
+                  host: 'localhost',
                   port: 4200,
                 },
               }),
@@ -234,15 +235,40 @@ describe('createConfig', () => {
         createConfig({
           options: {
             ...configBase,
-            devServer: {
-              port: 8080,
-            },
+            devServer: { port: 8080 },
           },
         })
       ).resolves.toStrictEqual([
         expect.objectContaining({
           devServer: expect.objectContaining({
             port: 8080,
+            client: expect.objectContaining({
+              webSocketURL: expect.objectContaining({
+                port: 8080,
+              }),
+            }),
+          }),
+        }),
+      ]);
+    });
+
+    it('should allow changing the devServer host', async () => {
+      await expect(
+        createConfig({
+          options: {
+            ...configBase,
+            devServer: { host: '0.0.0.0' },
+          },
+        })
+      ).resolves.toStrictEqual([
+        expect.objectContaining({
+          devServer: expect.objectContaining({
+            host: '0.0.0.0',
+            client: expect.objectContaining({
+              webSocketURL: expect.objectContaining({
+                hostname: '0.0.0.0',
+              }),
+            }),
           }),
         }),
       ]);

packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts

@@ -9,17 +9,22 @@ import type {
 } from './unsupported-options';
 
 export interface DevServerOptions extends DevServerUnsupportedOptions {
+  host?: string;
   port?: number;
+  proxyConfig?: string;
   ssl?: boolean;
-  sslKey?: string;
   sslCert?: string;
-  proxyConfig?: string;
+  sslKey?: string;
+}
+export interface NormalizedDevServerOptions extends DevServerOptions {
+  host: string;
+  port: number;
 }
 
 export interface OptimizationOptions {
+  fonts?: boolean;
   scripts?: boolean;
   styles?: boolean;
-  fonts?: boolean;
 }
 
 export type OutputHashing = 'none' | 'all' | 'media' | 'bundles';
@@ -33,8 +38,8 @@ export type HashFormat = {
 export interface OutputPath {
   base: string;
   browser: string;
-  server: string;
   media: string;
+  server: string;
 }
 
 export type AssetExpandedDefinition = {
@@ -55,9 +60,9 @@ export type ScriptOrStyleEntry =
       inject?: boolean;
     };
 export type GlobalEntry = {
-  name: string;
   files: string[];
   initial: boolean;
+  name: string;
 };
 export type IndexExpandedDefinition = {
   input: string;
@@ -122,7 +127,7 @@ export interface NormalizedAngularRspackPluginOptions
   assets: NormalizedAssetElement[];
   browser: string;
   commonChunk: boolean;
-  devServer: DevServerOptions & { port: number };
+  devServer: NormalizedDevServerOptions;
   extractLicenses: boolean;
   fileReplacements: FileReplacement[];
   globalScripts: GlobalEntry[];

packages/angular-rspack/src/lib/models/normalize-options.ts

@@ -22,6 +22,7 @@ import type {
   GlobalEntry,
   NormalizedAngularRspackPluginOptions,
   NormalizedAssetElement,
+  NormalizedDevServerOptions,
   NormalizedIndexElement,
   OutputPath,
   ScriptOrStyleEntry,
@@ -293,15 +294,17 @@ function normalizeSourceMap(
 
 function normalizeDevServer(
   devServer: DevServerOptions | undefined
-): DevServerOptions & { port: number } {
+): NormalizedDevServerOptions {
+  const defaultHost = 'localhost';
   const defaultPort = 4200;
 
   if (!devServer) {
-    return { port: defaultPort };
+    return { host: defaultHost, port: defaultPort };
   }
 
   return {
     ...devServer,
+    host: devServer.host ?? defaultHost,
     port: devServer.port ?? defaultPort,
   };
 }