nuxt.js always defaults to localhost despite host being defined as frontend.gradez.loc in nuxt.config.js

Contents of nuxt.config.js:

server: {
  host: 'frontend.gradez.loc',
  port: 3000
},

Contents of package.json:

"config": {
  "nuxt": {
    "host": "frontend.gradez.loc",
    "port": "3000"
  }
}

nuxt launch script as dev:

"dev": "nuxt --hostname frontend.gradez.loc --port 3000",

For some odd reason when starting the development script it always defaults to: Listening on: http://localhost:3000/

I tried to do exactly the same on react and the only thing I had to do was create a .env file and inside it I added host=frontend.gradez.loc and it worked just like that.

nuxt.js always defaults to localhost despite host being defined as frontend.gradez.loc in nuxt.config.js

Contents of nuxt.config.js:

server: {
  host: 'frontend.gradez.loc',
  port: 3000
},

Contents of package.json:

"config": {
  "nuxt": {
    "host": "frontend.gradez.loc",
    "port": "3000"
  }
}

nuxt launch script as dev:

"dev": "nuxt --hostname frontend.gradez.loc --port 3000",

For some odd reason when starting the development script it always defaults to: Listening on: http://localhost:3000/

I tried to do exactly the same on react and the only thing I had to do was create a .env file and inside it I added host=frontend.gradez.loc and it worked just like that.

• javascript
• webpack
• nuxt.js

Share Improve this question Follow edited Jul 3, 2020 at 17:08 Kittywhiskers Van Gogh 4788 bronze badges asked Jul 3, 2020 at 17:02 Ezrab_Ezrab_ 1,00377 gold badges2222 silver badges4949 bronze badges 8

• i dont think it has meaningful reason – Mahamudul Hasan Commented Jul 5, 2020 at 12:18
• @MdMahamudulHasan It does if you're backend isn't running on localhost and you need cookies with the SameSite attribute. – Ezrab_ Commented Jul 6, 2020 at 8:17
• Have you tried other options as well mentioned here: nuxtjs/faq/host-port? – Helper Commented Jul 6, 2020 at 8:40
• @ATULKUMARSINGH Yes I've tried all the options – Ezrab_ Commented Jul 6, 2020 at 8:49
• I tried few things. I only edited the package.json file as this: "dev": "NUXT_HOST=testportal. NUXT_PORT=3333 nuxt". On trying to run the project its giving "Error: listen EADDRNOTAVAIL: address not available 43.255.154.26:3000". It seems it tried to do what its expected to do. This error is genuine I just tried, I don't have any address like this. – Helper Commented Jul 6, 2020 at 9:10

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 6 +50

To create your server, under the hood Nuxt uses Node's http.createServer, then calls listen({ host, port }) on that server.

So if on your local machine the hostname frontend.gradez.loc is mapped to 127.0.0.1, which I assume is the case, then that server is running on the IP 127.0.0.1.

To create the url you see printed in Listening on..., Nuxt gets the IP of that underlying server, and maps it back to a hostname string. It statically maps the IP 127.0.0.1 to the string 'localhost', so no matter what host you configure, if it maps to 127.0.0.1 then Nuxt will always map that to localhost in that url. The code that does this is here.

There's nothing incorrect per-se about reporting the server is running on localhost:3000 rather than frontend.gradez.loc:3000. It's literally true, in a networking sense, because both ultimately point to 127.0.0.1:3000. So nothing is broken here from the perspective of the dev server, it's working as designed.

I'm not sure if you have anything automatically loading that url in the browser when you start the server - if so I can see how this is inconvenient from the perspective of other things in your workflow coupled to that hostname such as cookies, proxy servers etc - but if you manually type frontend.gradez.loc:3000 into your browser everything will just work.