diff --git a/packages/snaps-cli/README.md b/packages/snaps-cli/README.md index c716737cac..1fabab2d36 100644 --- a/packages/snaps-cli/README.md +++ b/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` diff --git a/packages/snaps-cli/src/commands/serve/index.ts b/packages/snaps-cli/src/commands/serve/index.ts index 2f3e85e2b2..bba635a3fa 100644 --- a/packages/snaps-cli/src/commands/serve/index.ts +++ b/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, }), }; diff --git a/packages/snaps-cli/src/commands/serve/serve.ts b/packages/snaps-cli/src/commands/serve/serve.ts index d79d668fa7..13dee3b157 100644 --- a/packages/snaps-cli/src/commands/serve/serve.ts +++ b/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}.`); } diff --git a/packages/snaps-cli/src/commands/watch/index.ts b/packages/snaps-cli/src/commands/watch/index.ts index 6d7d093cb3..c62224b912 100644 --- a/packages/snaps-cli/src/commands/watch/index.ts +++ b/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, }), }; diff --git a/packages/snaps-cli/src/commands/watch/watch.ts b/packages/snaps-cli/src/commands/watch/watch.ts index 81ef64cea0..274478444f 100644 --- a/packages/snaps-cli/src/commands/watch/watch.ts +++ b/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 = [ 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); }, }, { diff --git a/packages/snaps-cli/src/config.ts b/packages/snaps-cli/src/config.ts index fa41a590a6..ff43268cfd 100644 --- a/packages/snaps-cli/src/config.ts +++ b/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?: string; + /** * 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, diff --git a/packages/snaps-cli/src/types/yargs.d.ts b/packages/snaps-cli/src/types/yargs.d.ts index 3a55d5e928..ddf2ca779f 100644 --- a/packages/snaps-cli/src/types/yargs.d.ts +++ b/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; diff --git a/packages/snaps-cli/src/webpack/server.ts b/packages/snaps-cli/src/webpack/server.ts index b59d7faf07..4a10dfb306 100644 --- a/packages/snaps-cli/src/webpack/server.ts +++ b/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; }>((resolve, reject) => { try { - server.listen(port, () => { + server.listen(port, host, () => { const close = async () => { await new Promise((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);