Adds hostname to Snap config params for serve and watch

packages/snaps-cli/README.md

@@ -315,6 +315,13 @@ be served by the development server.
 The port to run the development server on. If set to `0`, a random port will
 be used.
 
+##### `server.host`
+
+- Type: `string`
+- Default: `localhost`
+
+The hostname to run the development server on.
+
 #### `environment`
 
 - Type: `Record<string, unknown>`

packages/snaps-cli/src/commands/serve/index.ts

@@ -8,11 +8,15 @@ const command = {
   command: ['serve', 's'],
   desc: 'Locally serve Snap file(s) for testing',
   builder: (yarg: yargs.Argv) => {
-    yarg.option('root', builders.root).option('port', builders.port);
+    yarg
+      .option('root', builders.root)
+      .option('port', builders.port)
+      .option('host', builders.host);
   },
   handler: async (argv: YargsArgs) =>
     serveHandler(argv.context.config, {
       port: argv.port ?? argv.context.config.server.port,
+      host: argv.host ?? argv.context.config.server.host,
     }),
 };
 

packages/snaps-cli/src/commands/serve/serve.ts

@@ -7,6 +7,7 @@ type ServeOptions = {
    * The port to listen on.
    */
   port: number;
+  host: string;
 };
 
 /**
@@ -24,7 +25,7 @@ export async function serveHandler(
 
   // If the `configPort` is `0`, the OS will choose a random port for us, so we
   // need to get the port from the server after it starts.
-  const { port } = await server.listen(options.port);
+  const { port, host } = await server.listen(options.port, options.host);
 
-  info(`The server is listening on http://localhost:${port}.`);
+  info(`The server is listening on http://${host}:${port}.`);
 }

packages/snaps-cli/src/commands/watch/index.ts

@@ -22,12 +22,14 @@ const command = {
       .option('serve', builders.serve)
       .option('root', builders.root)
       .option('port', builders.port)
+      .option('host', builders.host)
       .implies('writeManifest', 'manifest')
       .implies('depsToTranspile', 'transpilationMode');
   },
   handler: async (argv: YargsArgs) =>
     watchHandler(argv.context.config, {
       port: argv.port,
+      host: argv.host,
     }),
 };
 

packages/snaps-cli/src/commands/watch/watch.ts

@@ -12,6 +12,11 @@ type WatchOptions = {
    * The port to listen on.
    */
   port?: number;
+
+  /**
+   * The host to listen on.
+   */
+  host?: string;
 };
 
 type WatchContext = {
@@ -37,9 +42,12 @@ const steps: Steps<WatchContext> = [
     condition: ({ config }) => config.server.enabled,
     task: async ({ config, options, spinner }) => {
       const server = getServer(config);
-      const { port } = await server.listen(options.port ?? config.server.port);
+      const { port, host } = await server.listen(
+        options.port ?? config.server.port,
+        options.host ?? config.server.host,
+      );
 
-      info(`The server is listening on http://localhost:${port}.`, spinner);
+      info(`The server is listening on http://${host}:${port}.`, spinner);
     },
   },
   {

packages/snaps-cli/src/config.ts

@@ -109,6 +109,13 @@ export type SnapBrowserifyConfig = {
      */
     port?: number;
 
+    /**
+     * The host to listen the server on.
+     *
+     * @default localhost
+     */
+    host?: number;
+
     /**
      * The root directory to serve the snap from.
      *
@@ -312,6 +319,13 @@ export type SnapWebpackConfig = {
      * @default 8081
      */
     port?: number;
+
+    /**
+     * The host to listen the server on.
+     *
+     * @default localhost
+     */
+    host?: string;
   };
 
   /**
@@ -541,6 +555,7 @@ export const SnapsBrowserifyConfigStruct = object({
       eval: defaulted(boolean(), true),
       manifest: defaulted(boolean(), true),
       port: defaulted(number(), 8081),
+      host: defaulted(string(), 'localhost'),
       outfileName: defaulted(string(), 'bundle.js'),
       root: defaulted(file(), process.cwd()),
       sourceMaps: defaulted(boolean(), false),
@@ -603,6 +618,7 @@ export const SnapsWebpackConfigStruct = object({
       enabled: defaulted(boolean(), true),
       root: defaulted(file(), process.cwd()),
       port: defaulted(number(), 8081),
+      host: defaulted(string(), 'localhost'),
     }),
     {},
   ),
@@ -969,6 +985,7 @@ export function getWebpackConfig(
       enabled: legacyConfig.cliOptions.serve,
       port: legacyConfig.cliOptions.port,
       root: legacyConfig.cliOptions.root,
+      host: legacyConfig.cliOptions.host,
     },
     stats: {
       verbose: false,

packages/snaps-cli/src/types/yargs.d.ts

@@ -28,6 +28,7 @@ type YargsArgs = {
   stripComments: boolean;
   transformHtmlComments: boolean;
   port: number;
+  host: string;
   dist: string;
   src: string;
   eval: boolean;

packages/snaps-cli/src/webpack/server.ts

@@ -162,19 +162,24 @@ export function getServer(config: ProcessedConfig) {
    * Start the server on the port specified in the config.
    *
    * @param port - The port to listen on.
+   * @param host - The host to listen on.
    * @returns A promise that resolves when the server is listening. The promise
    * resolves to an object with the port and the server instance. Note that if
    * the `config.server.port` is `0`, the OS will choose a random port for us,
    * so we need to get the port from the server after it starts.
    */
-  const listen = async (port = config.server.port) => {
+  const listen = async (
+    port = config.server.port,
+    host = config.server.host,
+  ) => {
     return new Promise<{
       port: number;
+      host: string;
       server: Server;
       close: () => Promise<void>;
     }>((resolve, reject) => {
       try {
-        server.listen(port, () => {
+        server.listen(port, host, () => {
           const close = async () => {
             await new Promise<void>((resolveClose, rejectClose) => {
               server.close((closeError) => {
@@ -188,7 +193,12 @@ export function getServer(config: ProcessedConfig) {
           };
 
           const address = server.address() as AddressInfo;
-          resolve({ port: address.port, server, close });
+          resolve({
+            port: address.port,
+            host: address.address,
+            server,
+            close,
+          });
         });
       } catch (listenError) {
         reject(listenError);