Access Vue.js application from external IP

There is a brilliant feature that Vue CLI provides – a local development server. This feature of Vue infrastructure makes the process of prototyping easy and straightforward. You create an app and spin up the server. And there you go, you have your project running that is accessible by local IP address. No need to edit configuration as everything comes out of the box. However, if you want to access your Vue.js application from external IP, the process is a little bit trickier, but it is still doable.

I will be honest, it took me a while until I figured out how to make my Vue js application accessible from the external network. Had to spend some time spinning my head and trying different methods until I figured out how do things work.

I did not have any practical reason to do this, I just wanted to try if it is possible to do configure my app in a way it can be accessed by anyone. Of course, a better idea is to use a VPS (virtual private server) for hosting purposes. You can get it from any hosting provider for an affordable price. VPS is not only more reliable, as it guarantees high uptime, and takes care of the security, but it also might help you to learn new skills, like using GIT (for application deployment).

Well, of course, you can also host an application on your own machine. If the traffic will be low enough and won’t make your network slow, then it is an option. Just keep in mind that the application will go down as soon as you turn off your computer. And if you host the application on VPS, it will be accessible anytime and from anywhere.

Anyway, at least for me, there was no practical reason to host the project on my own computer and access the Vue.js application from external IP, but maybe you have your reason. Let me know in the comments.

By default, Vue.js application can only be accessed by local IP

The process of running the Vue app locally on your machine is pretty easy and straightforward – when you have a project that was generated with CLI, all you need to do is execute the npm run serve command. That’s it, your application will be accessible from your own machine and from the local network. You should get this after executing the npm run serve command:

So as you see from the picture above, your project is running and can be accessed by the provided IP addresses – by visiting localhost:8080. or 127.0.0.1:8080 in your browser. There is another IP address, which is for network access.

The problem with this is that you won’t be able to access it from outside the network. These are not external IP addresses – if anyone outside a network would try to visit it, he won’t be able to access it.

What does that mean? You can access your Vue.js app from any device that is connected to the same network. By using the network IP, you are able to access the Vue.js application from any device that connects to the same, WiFi hotspot (be it your smartphone, tablet, smart TV, etc.). But the same, network IP can also be used to access application from your own machine – the one you are hosting it on.

For example, you have a laptop that is connected to the home network by WiFi. So, you start the Vue application by running a dev server on your laptop. Let’s say you have another device – a smartphone. You will not be able to access the application from your smartphone by localhost:8080, however, you will be able to do it by network IP – 192.168.1.6 in this case.

In conclusion, these are the IP addresses your Vue.js can be accessed:

• http://127.0.0.1:8080 or http://localhost:8080 – by the given IP address application can be seen only from the device, the application is started on. If you have tried accessing it from another device that is connected to the same network, it will be unreachable.
• http://192.168.1.6:8080 – by default, by this IP address, the application will be visible to anyone on the network. Keep in mind, that this is not an exact match IP, it might (and probably will) differ in your case. It can be 192.168.1.1, 192.168.1.2, or 192.168.1.X.

The problem with this is that your project can only be accessed locally, no one else from the outside can see it. You can’t send an IP to a friend to show your project, you also can’t use your app remotely, being out of the home. Depending on your needs, it might be a problem.

How to make a Vue.js application accessible from external IP?

We have a problem – we can’t access the Vue.js application from external IP. How can we solve it?

Dev server is meant for local development and by default, your application is not accessible from external networks. However, with additional configurations, you can solve this problem. Let’s see how to bind public IP and make your Vue prototype accessible externally. The first step of the process is pretty easy. You need to create an additional file: vue.config.js.

This is how the content of a newly created file should look like:

module.exports = {
  devServer: {
    port: 80,
    host: '0.0.0.0'
  }
}

You can set your host to any IP address, however, in this case, 0.0.0.0 IP means “all IP addresses”. So when you spin up your server, the DHCP server gives you a network IP address automatically. And talking about the port, you can use any, but in this example let’s use port 80. Great, so half of the job is done, now comes the tricky part.

Note: now these instructions below are in the case you are doing everything on your own computer. If you are using VPS, you might only need to run the server with the created config file. No additional configurations required.

How does the dev server work? Vue CLI uses webpack for its development server, however, it is abstracted. When you edit the Vue config file, under the hood it uses webpack, so you are editing a configuration of a webpack.

After we created the config file, we need to edit some of the router configurations.

In order to run Vue externally, you have to have 80 port opened for your chosen IP address. To do this, you will need to go to your router settings and make the changes manually. Because everything differs between different routers, you need to figure out how to do this on your device. But basically, this is what you have to do (and this is what I did):

• Bind your machine MAC address to the specific IP, so that when we started the Vue dev server, it always has the same IP address (in my case I set it to 192.168.1.6). This is how everything looks on my router:

All I did here, is that I added a MAC address of my machine to the table with an IP address I will be using for my Vue app. This is how can you find out the MAC address for Windows. In short, if you are using Windows you can execute ipconfig /all in the cmd (you will find the MAC address in the physical address line). If you are with macOS or Linux machine, use ifconfig command. You will find the result in the ether line.

• After then, you need to configure the IP address and both, external and internal ports. The same IP that was bind to the MAC address should be set here. You can use any internal port (just make sure the same port is set in the vue.config.js file. Unless you set port 80 there). The same thing goes with external port – any that is not taken by other services of your network.

Let’s check if the Vue app can be accessed from the outside

In order for the changes of router configuration to refresh, you might need to restart your router (although in my case it was not necessary). After you made the changes let’s see if everything works. Execute npm run serve in the directory of your application.

Now to test if the Vue.js application can be accessed from the public, you will need to try connecting to it from outside your network. The fastest way might be to use your mobile data, or a proxy website (you can easily find a free proxy on Google).

In order to access your Vue js application from an external network by your own IP address, you will need to know your IP. If you don’t know it, you can find out about it here. Now, with your IP address, you should use a port, that you assigned to the internal IP address (a step we previously made). Let’s say the external IP address is 107.181.22.195. Add the external port to the end of an IP – in our case 80 and try visiting it. You should successfully see the main page of your application.