misc: improve onReady CLI experience (#3143)

bin/nuxt-start

@@ -80,4 +80,6 @@ if (nuxt.options.render.ssr === true) {
 
 const { port, host } = getLatestHost(argv)
 
-nuxt.listen(port, host)
+nuxt.listen(port, host).then(() => {
+  nuxt.showReady()
+})

lib/builder/builder.js

@@ -46,9 +46,7 @@ export default class Builder {
     // Shared spinner
     this.spinner = createSpinner({ minimal: this.options.minimalCLI })
     this.spinner.enabled = !this.options.test
-    this.logUpdate = logUpdate.create(process.stdout, {
-      showCursor: true
-    })
+    this.logUpdate = logUpdate.create(process.stdout)
 
     // Helper to resolve build paths
     this.relativeToBuild = (...args) =>

lib/builder/webpack/base.js

@@ -16,6 +16,7 @@ export default class WebpackBaseConfig {
     this.name = options.name
     this.isServer = options.isServer
     this.builder = builder
+    this.nuxt = this.builder.nuxt
     this.isStatic = builder.isStatic
     this.options = builder.options
     this.spinner = builder.spinner
@@ -207,7 +208,12 @@ export default class WebpackBaseConfig {
         profile: this.options.build.profile,
         name: this.isServer ? 'server' : 'client',
         color: this.isServer ? 'orange' : 'green',
-        logUpdate: this.logUpdate
+        logUpdate: this.logUpdate,
+        done: () => {
+          if (this.options.dev) {
+            this.nuxt.showReady(true)
+          }
+        }
       }))
     }
 

lib/core/nuxt.js

@@ -6,6 +6,7 @@ import enableDestroy from 'server-destroy'
 import _ from 'lodash'
 import chalk from 'chalk'
 import fs from 'fs-extra'
+import clear from 'clear'
 
 import Options from '../common/options'
 import { sequence, printError } from '../common/utils'
@@ -18,10 +19,14 @@ import Renderer from './renderer'
 const debug = Debug('nuxt:')
 debug.color = 5
 
+const IS_WINDOWS = /^win/.test(process.platform)
+const READY_ICON = IS_WINDOWS ? '' : '🚀'
+
 export default class Nuxt {
   constructor(options = {}) {
     this.options = Options.from(options)
 
+    this.readyMessage = null
     this.initialized = false
     this.onError = this.onError.bind(this)
 
@@ -116,6 +121,27 @@ export default class Nuxt {
     })
   }
 
+  showReady(doClear = false) {
+    if (!this.readyMessage || this.options.test) {
+      return
+    }
+
+    if (this.options.minimalCLI) {
+      // eslint-disable-next-line no-console
+      console.log('[READY] ', this.readyMessage)
+    } else {
+      if (doClear) {
+        clear()
+      }
+
+      process.stdout.write(
+        '\n' +
+          chalk.bgGreen.black(' READY ') +
+        chalk.green(` ${READY_ICON} ${this.readyMessage}\n`)
+      )
+    }
+  }
+
   listen(port = 3000, host = 'localhost') {
     return new Promise((resolve, reject) => {
       const server = this.renderer.app.listen(
@@ -126,14 +152,7 @@ export default class Nuxt {
             return reject(err)
           }
 
-          if (!this.options.test) {
-            // eslint-disable-next-line no-console
-            console.log(
-              '\n' +
-              chalk.bgGreen.black(' READY ') +
-              chalk.green(` Listening on ${host}:${port}\n`)
-            )
-          }
+          this.readyMessage = `Listening on ${host}:${port}`
 
           // Close server on nuxt close
           this.hook(

package.json

@@ -78,6 +78,7 @@
     "caniuse-lite": "^1.0.30000821",
     "chalk": "^2.3.2",
     "chokidar": "^2.0.3",
+    "clear": "^0.1.0",
     "compression": "^1.7.1",
     "connect": "^3.6.5",
     "css-loader": "^0.28.11",

yarn.lock

@@ -1504,6 +1504,10 @@ clean-css@4.1.x:
   dependencies:
     source-map "0.5.x"
 
+clear@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/clear/-/clear-0.1.0.tgz#b81b1e03437a716984fd7ac97c87d73bdfe7048a"
+
 cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"