How can I access vue project which is running by npm run server command from any other computer or mobile that is connected in the same network?

Question

I am running a VueJS project in Ubuntu v18.04.

When I run the project using npm run serve , it works fine and I can …
- access it in my Local: http://localhost:8080/ .
- also access it using Network: http://myip:8080/ .

But I cannot access it from any other computer (or via mobile) despite the fact that devices are on the same network.

Adding the host in vue.config.js file doesn't has no effect and running the command npm run serve --host 0.0.0.0 only result in the following error:

/var/www/html/unilliver_vue/0.0.0.0 in multi (webpack)-dev-server/client?http://192.168.53.75:8080/sockjs-node
(webpack)/hot/dev-server.js ./0.0.0.0, multi (webpack)-dev-server/client?http://localhost
(webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.53.75:8080/sockjs-node ./0.0.0.0

To install it, you can run: npm install --save

/var/www/html/unilliver_vue/0.0.0.0

Here is the code of vue.config.js file

module.exports = {
   dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/koreyomo/',
    proxyTable: {},
    host: '0.0.0.0',
    port: 8080, 
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
  },
}

I am using vuecli 3 , node version 10.16.3 and npm version 6.9.0 . Can anyone suggest me what to do if I want to access from other devices?

Answer 1

All you need to do is make sure your laptop and mobile are on the same Wifi Connection

Just Run npm run serve

Network: http://192.168.1.***:8100/

Type that network address in your mobile browser

It works for create-react-app & vue-cli

Hot reload will also work

If you don't have WiFi use a mobile hotspot