import consola from 'consola' import chalk from 'chalk' import opener from 'opener' import { common, server } from '../options' import { showBanner, eventsMapping, formatPath } from '../utils' export default { name: 'dev', description: 'Start the application in development mode (e.g. hot-code reloading, error reporting)', usage: 'dev ', options: { ...common, ...server, open: { alias: 'o', type: 'boolean', description: 'Opens the server listeners url in the default browser' } }, async run(cmd) { const { argv } = cmd await this.startDev(cmd, argv, argv.open) }, async startDev(cmd, argv) { try { const nuxt = await this._startDev(cmd, argv) return nuxt } catch (error) { consola.error(error) } }, async _startDev(cmd, argv) { const config = await cmd.getNuxtConfig({ dev: true, _build: true }) const nuxt = await cmd.getNuxt(config) // Setup hooks nuxt.hook('watch:restart', payload => this.onWatchRestart(payload, { nuxt, builder, cmd, argv })) nuxt.hook('bundler:change', changedFileName => this.onBundlerChange(changedFileName)) // Wait for nuxt to be ready await nuxt.ready() // Start listening await nuxt.server.listen() // Show banner when listening showBanner(nuxt) // Opens the server listeners url in the default browser (only once) if (argv.open) { argv.open = false const openerPromises = nuxt.server.listeners.map(listener => opener(listener.url)) await Promise.all(openerPromises) } // Create builder instance const builder = await cmd.getBuilder(nuxt) // Start Build await builder.build() // Return instance return nuxt }, logChanged({ event, path }) { const { icon, color, action } = eventsMapping[event] || eventsMapping.change consola.log({ type: event, icon: chalk[color].bold(icon), message: `${action} ${chalk.cyan(formatPath(path))}` }) }, async onWatchRestart({ event, path }, { nuxt, cmd, argv }) { this.logChanged({ event, path }) await nuxt.close() await this.startDev(cmd, argv) }, onBundlerChange(path) { this.logChanged({ event: 'change', path }) } }