Nuxt.js: how to modify nuxt server start port ,default port is 3000

[leeir]

_{This question is available on Nuxt.js community (#c433)}

[pi0]

@leeir you have two options:
1- Setting process.env.PORT before nuxt start or simply running PORT=6060 nuxt ...
2- Or adding config to package.json :

"nuxt": {
 "port": 8080
}

[alexchopin]

https://nuxtjs.org/faq/host-port

[kaelzhang]

https://nuxtjs.org/faq/host-port encounters error 525

[liquidvisual]

I've tried this but the browser doesn't load anything:

ERR_CONNECTION_REFUSED

[Fthi-S3074641]

From the official site:
`"config": {

"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}

},
"scripts": {
"dev": "nuxt"
}`

[andriyfm]

` Error: connect ECONNREFUSED 127.0.0.1:3000

• util.js:992 Object._errnoException
  util.js:992:11

• util.js:1014 _exceptionWithHostPort
  util.js:1014:20

• net.js:1186 TCPConnectWrap.afterConnect [as oncomplete]
  net.js:1186:14`

[aebrs]

https://nuxtjs.org/faq/host-port encounters error 525

Yes: it has on effect. Completely ignored by nuxt, while package.js config change the local port but there it seems impossible to use process.env.PORT.
The other problem is that #nuxt team is also ignoring this problem leaving it unsolved.

[galvez]

@aebrs There is probably something wrong with your deployment. If I do:

PORT=4000 nuxt dev

On an empty directory for instance, I get a Nuxt app running on port 4000.

[aebrs]

@aebrs There is probably something wrong with your deployment. If I do:

PORT=4000 nuxt dev

On an empty directory for instance, I get a Nuxt app running on port 4000.

But I receive this:
npm run dev

> [email protected] dev F:\Ebrahimi\1397\Site\nuxt
> PORT=4000 nuxt dev

'PORT' is not recognized as an internal or external command,
operable program or batch file.

[pi0]

@aebrs This is not a bug with nuxt. As you are using windows, please add cross-env dependency and then:

cross-env PORT=4000 nuxt dev

Also mentioned at docs:

• https://nuxtjs.org/faq/host-port/#with-nuxt_host-and-nuxt_port-env-variables
• https://nuxtjs.org/api/configuration-dev

[aebrs]

@aebrs This is not a bug with nuxt. As you are using windows, please add cross-env dependency and then:

cross-env PORT=4000 nuxt dev

Also mentioned at docs:

• https://nuxtjs.org/faq/host-port/#with-nuxt_host-and-nuxt_port-env-variables
• https://nuxtjs.org/api/configuration-dev

Dear Pooya, Thank you for your attention. But there is a miss-understanding. The problem is not with localhost. My problem is when I want to deploy code on server: windows, plesk, Onyx. There is no clear instruction on how to upload and run code on shared servers. Tried to use all type of online codes but the project do not start and site is not seen on line. Mostly it is about getting host and port from server. In Node.js and Vue.js, both, this work fine :
const host = process.env.host || "0.0.0.0"; const port = process.env.port || 8080;
but nuxt.js response is 'undefined'.

[pi0]

@aebrs Would you please share your current package.json and nuxt.config.jsfiles? Also please clarify how do you use Nuxt? Programmatically with a customized express server?

[aebrs]

@aebrs Would you please your current package.json and nuxt.config.jsfiles?

package.json:

 {
  "name": "nuxt-i18n-routing",
  "version": "1.0.0",
  "description": "Localized routing with Nuxt.js",
  "scripts": {
    "dev": "node server.js",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "express-session": "^1.15.6",
    "nuxt": "^1.4.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-i18n": "^7.3.2",
    "vue-smooth-scroll": "^1.0.13",
    "vuetify": "^1.2.6"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-register": "^6.26.0",
    "cross-env": "^5.2.0",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

and nuxt.config.js:

const session = require('express-session')
const { generateRoutes } = require('./utils/router')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'order.iranord.com',
    meta: [
      { charset: 'utf-8' },
      //for mobile friendly website
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Localized routing with Nuxt.js' }
    ],
    link: [
      // icon of wbsite
      { rel: 'icon', type: 'image/x-icon', href: '/Iranord.ico' },
      // for using icons import this font
      { rel:'stylesheet' , href:'https://fonts.googleapis.com/icon?family=Material+Icons'}
    ]
  },
  /**
   * Router configuration
   */
  router: {
    middleware: ['i18n', 'mobile'],
    extendRoutes (routes) {
      const newRoutes = generateRoutes(routes)
      routes.splice(0, routes.length)
      routes.unshift(...newRoutes)
    }
  },

  //import css and styles
  css: ['~/assets/app.styl', '@/style/style-fa.css', 'swiper/dist/css/swiper.css'],

  /*
  ** Customize the progress bar color
  */
  loading: { color: '#ffd100' },
  // /*
  // ** Session ID
  // */
  serverMiddleware: [
    // session middleware
    session({
      secret: 'super-secret-key',
      resave: true,
      saveUninitialized: false,
      cookie: {
        secure: false,
        httpOnly: false ,
        // نامی که کوکی با آن ذخیره میشود
        name: 'iran-order-cookies',
        domain: '.iranord.ir',
        // set Session ID in 8 hours
        maxAge: 480000,
        // دسترسی به یک session در تمام صفحات
        path: '/' 
      }
    }),
  ],
  /*
  ** Build configuration
  */
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  build: {
    maxChunkSize: 300000,
    vendor: ['axios'],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  plugins: [
    { src: '~/plugins/global-mixin.js' },
    { src: '~/plugins/vue-i18n.js', injectAs: 'i18n' },
    { src: '~/plugins/vuetify.js' },
    //for using swiper in nuxt we must write [ssr: false]
    { src: '~plugins/vue-awesome-swiper', ssr: false }
  ]
}

[aebrs]

@aebrs Would you please your current package.json and nuxt.config.jsfiles?

package.json:

{
"name": "nuxt-i18n-routing",
"version": "1.0.0",
"description": "Localized routing with Nuxt.js",
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"axios": "^0.18.0",
"express-session": "^1.15.6",
"nuxt": "^1.4.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^7.3.2",
"vue-smooth-scroll": "^1.0.13",
"vuetify": "^1.2.6"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-register": "^6.26.0",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1"
}
}
and nuxt.config.js:

const session = require('express-session')
const { generateRoutes } = require('./utils/router')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
/*
* Headers of the page
_/ head: { title: 'order.iranord.com', meta: [ { charset: 'utf-8' }, //for mobile friendly website { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Localized routing with Nuxt.js' } ], link: [ // icon of wbsite { rel: 'icon', type: 'image/x-icon', href: '/Iranord.ico' }, // for using icons import this font { rel:'stylesheet' , href:'https://fonts.googleapis.com/icon?family=Material+Icons'} ] }, /_

• Router configuration
  */
  router: {
  middleware: ['i18n', 'mobile'],
  extendRoutes (routes) {
  const newRoutes = generateRoutes(routes)
  routes.splice(0, routes.length)
  routes.unshift(...newRoutes)
  }
  },

//import css and styles
css: ['~/assets/app.styl', '@/style/style-fa.css', 'swiper/dist/css/swiper.css'],

/*
* Customize the progress bar color
_/ loading: { color: '#ffd100' }, // /_
// * Session ID
// _/ serverMiddleware: [ // session middleware session({ secret: 'super-secret-key', resave: true, saveUninitialized: false, cookie: { secure: false, httpOnly: false , // نامی که کوکی با آن ذخیره میشود name: 'iran-order-cookies', domain: '.iranord.ir', // set Session ID in 8 hours maxAge: 480000, // دسترسی به یک session در تمام صفحات path: '/' } }), ], /_
* Build configuration
_/ module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, build: { maxChunkSize: 300000, vendor: ['axios'], /_
* Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
plugins: [
{ src: '/plugins/global-mixin.js' },
{ src: '/plugins/vue-i18n.js', injectAs: 'i18n' },
{ src: '~/plugins/vuetify.js' },
//for using swiper in nuxt we must write [ssr: false]
{ src: '~plugins/vue-awesome-swiper', ssr: false }
]
}

server.js:

const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const host = process.env.host || "0.0.0.0";
const port = process.env.port || 8080;

async function start() {
  let config = require('./nuxt.config.js');
  config.dev = false;
  config.env = {};
  config.env.baseUrl = host;

  // config.axios.baseURL = 'http://' + process.env.WEBSITE_HOSTNAME;
  // console.error(config.axios.baseURL);

  // config.axios.browserBaseURL = 'http://' + process.env.WEBSITE_HOSTNAME;
  // console.error(config.axios.browserBaseURL);

  const nuxt = new Nuxt(config);

  const builder = new Builder(nuxt);

  await builder.build().catch(error => {
    console.error(error);
    process.exit(1);
  });
  console.log(host);
  console.log(port);
  app.use(nuxt.render);
  app.listen(port);
};

start();

[pi0]

@aebrs You are using envs from your own implementation and custom server:

const host = process.env.host || "0.0.0.0";
const port = process.env.port || 8080;

This should be:

const host = process.env.HOST || "0.0.0.0";
const port = process.env.PORT || 8080;

According to plesk docs and their express example envs should be UPPER-CASE.

[pi0]

@aebrs Related: https://support.plesk.com/hc/en-us/articles/115003763474-Unable-to-access-website-with-Node-js-application-EADDRINUSE.

[aebrs]

@aebrs Related: https://support.plesk.com/hc/en-us/articles/115003763474-Unable-to-access-website-with-Node-js-application-EADDRINUSE.

Dear Pooya:
1- I used the same code in node.js for backend server and it receive correct port on server :
const port = process.env.PORT;
2- The same things is used in Vue.js, I used, and it is working on the same server :
const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT)

So that is why I believe that it is not with PLESK, certainly it is something with NUXT.js

[pi0]

@aebrs I've fully tested Nuxt with Plesk Onyx and both development and production builds are working. Please refer to this link: https://github.com/pi0/nuxt-plesk-demo

If you had any further problems, please fork that repo and open a support ticket on Plesk Help Center about your problem. We can't help anymore investigating about your server setup problems.