Nuxt.js: Expose localhost to external - Debug in dev mode

[nicoladl]

Hi guys!
After npm run generate I can serve dist folder and expose ip in my network.
How can I do the same thing during development with localhost:3000?

Thank you

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

[christophwolff]

try

npm install cross-env

and change the generate script in your package json

"generate": "cross-env NODE_ENV=development HOST=0.0.0.0 PORT=3000 nuxt generate",

[nicoladl]

Thank you @christophwolff
I need to expose ip when i launch dev script, not when I launch generate.

I have try this:

"dev": "cross-env NODE_ENV=development HOST=0.0.0.0 PORT=3000 nuxt"

Browser returns: Cannot GET /

My goal is debug the application with mobile devices in dev mode so I can have hot reloading.

Thank you

[christophwolff]

ahh i understand. i do exactly this in the dev script and it works for me.

[nicoladl]

@christophwolff thank you
I tried your solution but after I have launched the script, browser at 0.0.0.0:3000 respond but all my test devices responds with Connection Refued

[ckpiggy]

Try this https://ngrok.com/

[Hellowor1d]

+1

[Hellowor1d]

@nicoladl Hi~ have you solved this ? I have the same scene， need your help 💯

[nicoladl]

@Hellowor1d nope
I generate anytimes I need and start serve ./dist

[Hellowor1d]

@nicoladl I had solved the problem recently, just like the method of @christophwolff. I didn't install cross-env, but also made difference.

1. One of my project is based on nuxt-starter
   add HOST into package.json, like below:

"scripts": {
    "dev": "HOST=0.0.0.0 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  }

1. Another project is based on nuxt-express
   change the default host from 127.0.0.1 to 0.0.0.0 in server/index.js

const app = express()
const host = process.env.HOST || '0.0.0.0'
const port = process.env.PORT || 3000

make sure that your mobile devices are in the same wifi network with your development server,
open the page on mobile device through http://{server IP} : {port}

tip: https is not supported under default setting

[nicoladl]

Thanks @Hellowor1d. I will give a try in the next Nuxt project

[nicoladl]

I'm following @christophwolff and @Hellowor1d suggestions and this guide. But when i try to open http://0.0.0.0:3333 on my mobile device I get connection_refused. (I'm in the same wifi network).
What I do wrong?

[nathakits]

@nicoladl you can try replacing the HOST 0.0.0.0 with your internet address. for example something like this 192.168.1.2

[nicoladl]

It works!
Thanks @nathakits

[benwinding]

Here's an easy way to expose the _nuxt_ app to the local network, just use your IP before calling yarn start

$ HOST=192.168.1.5 yarn start

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.