Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nuxtjs: Expose localhost to external doesn't work

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

like image 621
Gregor Voinov Avatar asked Mar 19 '19 08:03

Gregor Voinov


2 Answers

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.

like image 140
sparkyspider Avatar answered Sep 19 '22 16:09

sparkyspider


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.

like image 23
Leopold Kristjansson Avatar answered Sep 21 '22 16:09

Leopold Kristjansson