diff --git a/packages/next/build/output/index.ts b/packages/next/build/output/index.ts index 1fabdd57971728b..3a89f3b99fa6586 100644 --- a/packages/next/build/output/index.ts +++ b/packages/next/build/output/index.ts @@ -5,8 +5,8 @@ import createStore from 'next/dist/compiled/unistore' import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages' import { OutputState, store as consoleStore } from './store' -export function startedDevelopmentServer(appUrl: string) { - consoleStore.setState({ appUrl }) +export function startedDevelopmentServer(appUrl: string, bindAddr: string) { + consoleStore.setState({ appUrl, bindAddr }) } let previousClient: import('webpack').Compiler | null = null diff --git a/packages/next/build/output/store.ts b/packages/next/build/output/store.ts index e7bb6734ee503e2..12dbf11647e8f0a 100644 --- a/packages/next/build/output/store.ts +++ b/packages/next/build/output/store.ts @@ -4,8 +4,8 @@ import stripAnsi from 'next/dist/compiled/strip-ansi' import * as Log from './log' export type OutputState = - | { bootstrap: true; appUrl: string | null } - | ({ bootstrap: false; appUrl: string | null } & ( + | { bootstrap: true; appUrl: string | null; bindAddr: string | null } + | ({ bootstrap: false; appUrl: string | null; bindAddr: string | null } & ( | { loading: true } | { loading: false @@ -15,9 +15,13 @@ export type OutputState = } )) -export const store = createStore({ appUrl: null, bootstrap: true }) +export const store = createStore({ + appUrl: null, + bindAddr: null, + bootstrap: true, +}) -let lastStore: OutputState = { appUrl: null, bootstrap: true } +let lastStore: OutputState = { appUrl: null, bindAddr: null, bootstrap: true } function hasStoreChanged(nextStore: OutputState) { if ( ([ @@ -40,7 +44,7 @@ store.subscribe((state) => { if (state.bootstrap) { if (state.appUrl) { - Log.ready(`started server on ${state.appUrl}`) + Log.ready(`started server on ${state.bindAddr}, url: ${state.appUrl}`) } return } diff --git a/packages/next/cli/next-dev.ts b/packages/next/cli/next-dev.ts index 1190a89f9fa9873..a4c09d2c69b77d3 100755 --- a/packages/next/cli/next-dev.ts +++ b/packages/next/cli/next-dev.ts @@ -43,7 +43,7 @@ const nextDev: cliCommand = (argv) => { Options --port, -p A port number on which to start the application - --hostname, -H Hostname on which to start the application + --hostname, -H Hostname on which to start the application (default: 0.0.0.0) --help, -h Displays this message `) process.exit(0) @@ -106,15 +106,12 @@ const nextDev: cliCommand = (argv) => { } const port = args['--port'] || 3000 - const appUrl = `http://${args['--hostname'] || 'localhost'}:${port}` + const host = args['--hostname'] || '0.0.0.0' + const appUrl = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}` - startServer( - { dir, dev: true, isNextDevCommand: true }, - port, - args['--hostname'] - ) + startServer({ dir, dev: true, isNextDevCommand: true }, port, host) .then(async (app) => { - startedDevelopmentServer(appUrl) + startedDevelopmentServer(appUrl, `${host}:${port}`) // Start preflight after server is listening and ignore errors: preflight().catch(() => {}) // Finalize server bootup: diff --git a/packages/next/cli/next-start.ts b/packages/next/cli/next-start.ts index d84e04ebada2e07..72a5b09d2ab0a3c 100755 --- a/packages/next/cli/next-start.ts +++ b/packages/next/cli/next-start.ts @@ -42,7 +42,7 @@ const nextStart: cliCommand = (argv) => { Options --port, -p A port number on which to start the application - --hostname, -H Hostname on which to start the application + --hostname, -H Hostname on which to start the application (default: 0.0.0.0) --help, -h Displays this message `) process.exit(0) @@ -50,11 +50,11 @@ const nextStart: cliCommand = (argv) => { const dir = resolve(args._[0] || '.') const port = args['--port'] || 3000 - startServer({ dir }, port, args['--hostname']) + const host = args['--hostname'] || '0.0.0.0' + const appUrl = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}` + startServer({ dir }, port, host) .then(async (app) => { - Log.ready( - `started server on http://${args['--hostname'] || 'localhost'}:${port}` - ) + Log.ready(`started server on ${host}:${port}, url: ${appUrl}`) await app.prepare() }) .catch((err) => { diff --git a/test/integration/cli/test/index.test.js b/test/integration/cli/test/index.test.js index a916e79f16c7cfe..79b112712de1adf 100644 --- a/test/integration/cli/test/index.test.js +++ b/test/integration/cli/test/index.test.js @@ -204,6 +204,7 @@ describe('CLI Usage', () => { test('--port', async () => { const port = await findPort() const output = await runNextCommandDev([dir, '--port', port], true) + expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`)) expect(output).toMatch(new RegExp(`http://localhost:${port}`)) }) @@ -214,12 +215,14 @@ describe('CLI Usage', () => { const output = await runNextCommandDev([dir, '--port', port], true, { env: { NODE_OPTIONS: '--inspect' }, }) + expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`)) expect(output).toMatch(new RegExp(`http://localhost:${port}`)) }) test('-p', async () => { const port = await findPort() const output = await runNextCommandDev([dir, '-p', port], true) + expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`)) expect(output).toMatch(new RegExp(`http://localhost:${port}`)) }) @@ -262,7 +265,8 @@ describe('CLI Usage', () => { [dir, '--hostname', '0.0.0.0', '--port', port], true ) - expect(output).toMatch(new RegExp(`http://0.0.0.0:${port}`)) + expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`)) + expect(output).toMatch(new RegExp(`http://localhost:${port}`)) }) test('-H', async () => { @@ -271,7 +275,8 @@ describe('CLI Usage', () => { [dir, '-H', '0.0.0.0', '--port', port], true ) - expect(output).toMatch(new RegExp(`http://0.0.0.0:${port}`)) + expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`)) + expect(output).toMatch(new RegExp(`http://localhost:${port}`)) }) test('should warn when unknown argument provided', async () => {