20

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

enter image description here

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... enter image description here

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

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

Gregor Voinov
  • 2,203
  • 7
  • 34
  • 52
  • I think a firewall is causing your problem. But first, have you tried pinging your pc in the network e.g. with your phone? – confusius Mar 19 '19 at 13:19
  • @confusius 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... – Gregor Voinov Mar 19 '19 at 19:53
  • @GregorVoinov, have you solved this? – claudios Jul 09 '19 at 09:38
  • 2
    @claudios yes. You have to enter on your mobile the IP from your wifi + the port which was defined in the nuxt.config. – Gregor Voinov Jul 09 '19 at 10:18

4 Answers4

36

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.

sparkyspider
  • 13,195
  • 10
  • 89
  • 133
16

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

NUXT sharing localhost on your network - mobile debugging

4.

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

Leopold Kristjansson
  • 2,246
  • 28
  • 47
11

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.

Frank Q Liu
  • 111
  • 1
  • 2
1

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!

Rod
  • 31
  • 2