Use localhost in CLI output when binding to 0.0.0.0

vercel · Jan 20, 2021 · 22c49a7 · 22c49a7
1 parent d6bbe27
commit 22c49a7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git 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
@@ -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<OutputState>({ appUrl: null, bootstrap: true })
+export const store = createStore<OutputState>({
+  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
@@ -107,11 +107,11 @@ const nextDev: cliCommand = (argv) => {
 
   const port = args['--port'] || 3000
   const host = args['--hostname'] || '0.0.0.0'
-  const appUrl = `http://${host}:${port}`
+  const appUrl = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}`
 
   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
@@ -51,9 +51,10 @@ const nextStart: cliCommand = (argv) => {
   const dir = resolve(args._[0] || '.')
   const port = args['--port'] || 3000
   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://${host}:${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
@@ -204,7 +204,8 @@ describe('CLI Usage', () => {
     test('--port', async () => {
       const port = await findPort()
       const output = await runNextCommandDev([dir, '--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("NODE_OPTIONS='--inspect'", async () => {
@@ -214,13 +215,15 @@ describe('CLI Usage', () => {
       const output = await runNextCommandDev([dir, '--port', port], true, {
         env: { NODE_OPTIONS: '--inspect' },
       })
-      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('-p', async () => {
       const port = await findPort()
       const output = await runNextCommandDev([dir, '-p', 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('-p conflict', async () => {
@@ -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 () => {