How to start nuxt project on IP Address

Question

This might be a stupid question since it seems pretty simple, but I can't get my nuxt project to run on my IP address.

The Nuxt.js docs say that I have to put this in my package.json file in order for it to start on my IP:

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
}

In a lot of articles online the 0.0.0.0 automatically binds to your IP address so you can access the project in the browser with your IP address. Whenever I run the command yarn dev it just starts the project on 0.0.0.0:8000. Is this normal? If yes, how do I get it to run on my actual IP Address? I would really like to know how I can get this done, this is really confusing me.

Answer 1

I know you asked this a long time ago and never got an answer. This is currently the top Google result so it is worth a good answer for the future of the internet.

Your setup looks (largely) correct, but it needs to be in your nuxt.config.js file, not your package.json.

There are a few ways to do this:

Option #1 - Inside nuxt.config.js:

export default {

    // ... All your other settings are already here

    // You will need to add this:
    server: {
        host: '0',
        port: '3000' // optional
    }
}

This will expose your app on your local network. When you run npm run dev now it will run on your computer's IP address. The output in the console will link to your computer's IP address followed by the port number. It will no longer use "localhost".

Option #2 - From the Command Line

If you just want to run this as a one-off command to test something briefly, then you can specify HOST=0 in the command line before running your npm run dev command.

It would look like this:

HOST=0 PORT=8000 npm run dev

Option #3 - Create A Script for Hosting the Dev Server

This option is good if you frequently switch between localhost testing and internal network testing. It allows you to create a new NPM script so that you can simply run npm run dev when you want to run locally, or run npm run dev:host if you want to host internally.

This requires adding a script to package.json

/*
 * package.json
 */
{
    ... other options

    "scripts": {
        "dev:host": "nuxt --hostname '0' --port 8000"
    }
}

You can change the name of the script (the part that says "dev:host" to be anything you want to call it. In this example though you would run npm run dev:host in the console to run it on the network. But the npm run dev command would work the same as before (using localhost).

---

All of these are useful in case you want to open the app in development on a mobile device for testing. Your mobile device will need to be on the same wifi network as your computer to access the page. Just open a web browser on your other device, type in the IP address with the port number and it will connect to your dev server. This does NOT publically expose your app, it only exposes it internally on your network. This is designed for testing, nothing more.

Read More in the Docs: https://nuxtjs.org/docs/2.x/features/configuration#edit-host-and-port

Answer 2

If you wanna run the app in public IP you need a hosting like digitalocean, vultr.

If you wanna run the app in a private IP then you install a web server and you need to use your public ip address and set up port forwarding. But this is not safe.

Answer 3

You can modify this in the nuxt.config.js file it is not advised to as it might cause you issues when hosting your site. It is much better to modify the host direct in the dev command. Like this

HOST=0 npm run dev

or the port that you want

PORT=8000 npm run dev

or both

HOST=0 PORT=8000 npm run dev