Nuxtjs: Expose localhost to external doesn't work

Question

I try to connect my mobile to my local nuxtjs project. I thought it would be easy as described there. https://nuxtjs.org/faq/host-port/ but nothing works. I have also installed cross-env but didn't solved my problem.

If I start npm run dev on my pc

"dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",

the server starts and I can connect to the project with the url

But if I try to connect with my mobile, it doesn't load. My mobile and pc are connected to the same wifi.

I tried to find out which ip nuxtjs sets in the url, if there is maybe the problem. I used ipconfig and in the first entries I found the ip but there are many others and I have no idea for what they are...

I have also taken a look in the settings of my wifi, but there I found a different ip-address

Is that the problem? I tried to set this ip in NUXT_HOST, but then I only get this error message

listen EADDRNOTAVAIL ip-address

Any ideas? Ah I'm using windows 10 if that makes a difference.

SOLUTION

On the mobile the IP from the wifi + the port which was set in the nuxt.config is required, not the IP that gets outputed in the console

Guacharo

I think a firewall is causing your problem. But first, have you tried pinging your pc in the network e.g. with your phone? – Otherwise

@Otherwise I pinged the ip and it was sending 4 packages and received 4 and time was 0ms. So that works, I shutted down my firewall and tried to load the page on my mobile, but same result. Can't access the page... – Guacharo

@GregorVoinov, have you solved this? – Garald

@Garald yes. You have to enter on your mobile the IP from your wifi + the port which was defined in the nuxt.config. – Guacharo

Answer 1

I hope I understand your question correctly.

If you are asking for a way to allow Nuxt development server to allow connections from (external) hosts and ip addresses other than localhost, this is easily done by modifying nuxt.config.js as such:

    build: {
        extend(config, ctx) {} // blah blah
    },
    server: {
        host: "0.0.0.0"
    }

I use this to connect to Nuxt from my mobile phone via Wi-Fi over my local network.

Telesis

it is devServer in current version (3.11) nuxt.com/docs/api/nuxt-config#devserver, but it works, thx 🙏 – Groundmass

Answer 2

For me to share my Nuxt dev-website on my local network (to debug on other devices like phones and tablets) I did the following.

1.

npm install --save-dev cross-env

2.

I changed the "dev" command in my package.json to

"dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",

3.

I ran npm run dev and got the following

4.

I visited the address given to me in the console on other devices. Worked very well.

Destined

if it's not working try add "dev" at the end "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt dev", – Triphammer

Answer 3

There're a couple of ways of doing that. Here's the official doc.

For example:

"scripts": {
  "dev": "HOST=0.0.0.0 PORT=3333 nuxt"
}

or direct command: nuxt --hostname myhost --port 3333

etc.

Choirboy

Answer 4

I had success with Leopold's method after also setting Windows 11 Network Settings to "Private Network" for the wi-fi network. I suspect this indicates issue with firewall settings - my next step was to check Node firewall settings but the "Private Network" trick worked. Good luck!

Mashburn

Answer 5

Updated @sparkyspider's answer. As it is devServer in current nuxt version (3.11) nuxt docs, but it works for me, thx 🙏

nuxt.config.js as such:

build: {
    extend(config, ctx) {} // blah blah
},
devServer: {
    host: "0.0.0.0"
}

Groundmass