feat: support server option in nuxt.config.js to set PORT and HOST (#3701)

* feat: support `server` option in `nuxt.config.js` to set PORT and HOST

* lint

* change the conifg priority to `argv > nuxt.config.js > env.NUXT_PORT > env.PORT > package.json > default`

* check for `options.server`

bin/common/utils.js

@@ -43,17 +43,12 @@ exports.loadNuxtConfig = (argv) => {
   options.mode =
     (argv.spa && 'spa') || (argv.universal && 'universal') || options.mode
 
+  // Server options
+  if (!options.server) {
+    options.server = {}
+  }
+  options.server.port = argv.port || options.server.port
+  options.server.host = argv.hostname || options.server.host
+
   return options
 }
-
-exports.getLatestHost = (argv) => {
-  const port =
-    argv.port || process.env.NUXT_PORT || process.env.PORT || process.env.npm_package_config_nuxt_port
-  const host =
-    argv.hostname ||
-    process.env.NUXT_HOST ||
-    process.env.HOST ||
-    process.env.npm_package_config_nuxt_host
-
-  return { port, host }
-}

bin/nuxt-dev

@@ -3,7 +3,7 @@ const parseArgs = require('minimist')
 const consola = require('consola')
 const { version } = require('../package.json')
 const { Nuxt, Builder } = require('..')
-const { loadNuxtConfig, getLatestHost } = require('./common/utils')
+const { loadNuxtConfig } = require('./common/utils')
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -54,9 +54,6 @@ let hooked = false
 let dev = startDev()
 
 function startDev(oldInstance) {
-  // Get latest environment variables
-  const { port, host } = getLatestHost(argv)
-
   // Error handler
   const onError = (err, instance) => {
     consola.error(err)
@@ -71,6 +68,9 @@ function startDev(oldInstance) {
     return onError(err, oldInstance)
   }
 
+  // Get latest environment variables
+  const { port, host } = options.server
+
   // Create nuxt and builder instance
   let nuxt
   let builder

bin/nuxt-start

@@ -4,7 +4,7 @@ const { resolve } = require('path')
 const parseArgs = require('minimist')
 const consola = require('consola')
 const { Nuxt } = require('../dist/nuxt-start')
-const { loadNuxtConfig, getLatestHost } = require('./common/utils')
+const { loadNuxtConfig } = require('./common/utils')
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -76,7 +76,7 @@ if (nuxt.options.render.ssr === true) {
   }
 }
 
-const { port, host } = getLatestHost(argv)
+const { port, host } = options.server
 
 nuxt.listen(port, host).then(() => {
   nuxt.showReady(false)

examples/custom-port-host/README.md

@@ -0,0 +1,3 @@
+# Custom PORT and HOST in `nuxt.config.js` with Nuxt.js
+
+https://nuxtjs.org/examples/custom-port-host

examples/custom-port-host/nuxt.config.js

@@ -0,0 +1,6 @@
+export default {
+  server: {
+    port: 8000,
+    host: '0.0.0.0'
+  }
+}

examples/custom-port-host/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "example-custom-port-host",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/custom-port-host/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>Set port and host in <code>nuxt.config.js</code>.</p>
+</template>

lib/common/nuxt.config.js

@@ -14,6 +14,16 @@ export default {
   // Mode
   mode: 'universal',
 
+  // Server options
+  server: {
+    port: process.env.NUXT_PORT ||
+      process.env.PORT ||
+      process.env.npm_package_config_nuxt_port,
+    host: process.env.NUXT_HOST ||
+      process.env.HOST ||
+      process.env.npm_package_config_nuxt_host
+  },
+
   // Dirs
   buildDir: '.nuxt',
   nuxtDir,

test/fixtures/with-config/nuxt.config.js

@@ -2,6 +2,10 @@ import path from 'path'
 
 export default {
   srcDir: __dirname,
+  server: {
+    port: 8000,
+    host: '0.0.0.0'
+  },
   router: {
     base: '/test/',
     middleware: 'noop',