1

From my Vue.js PWA I want to access a local API (server running in a Docker container) on my network. This server is running on the same computer as where I'm developing my Vue application (where I call yarn serve on). If I access the API from my computer, everything is fine. I want it to work as well on my phone however.

Current approach

I want my PWA to send a request to my local server to get a JSON reply with data. Which I do like this:

methods: {
  requestNext() {
    axios
      .get('http://0.0.0.0:8081/')  //   'http://172.16.0.xx:8081/'
      .then(response => (this.apiData = response.data))
      .catch(error => console.log(error))
  }
}

If I navigate to http://localhost:8080/ to access my App and trigger the function requestNext() everything works as expected. As expected, http://0.0.0.0:8081/ does not work on my phone. Obviously, because my API server is not running on my phone.

To have my Vue app both work on my computer and phone, I can change the IP from 0.0.0.0:8081 to 172.16.0.88:8081. And it works.

Problem

While setting the IP to my computer's local network IP works, on every restart this local IP changes. That would require me to manually change the code after every restart (which is also not Git friendly or if someone else is copying the setup).

Question

How do I get the Network IP of the computer where the Vue App is hosted (the computer where yarn serve is executed on) by code?

Which allows me to do something as:

axios
  .get('http://' + automaticNetworkIp + ':8081/')
NumesSanguis
  • 5,832
  • 6
  • 41
  • 76

0 Answers0