Accessing localhost app on other devices in the same network for testing.

Today I found a solution to a problem I had, but then the solution came with a whole new development experience I did not have in mind. Initially, I had to switch from one machine to the other as one of my machines is faster but it breaks the UI for some reasons (age, I guess)…

I realise I can configure my phoenix app such that I can access it on any other machine that’s connected to the same network, and here’s how I did it.

In the config/dev.exs file, I updated the configuration to bind the server to the IP address 0.0.0.0 instead of the default 127.0.0.1, which allows the server to listen on all available IP addresses, thereby allowing access from other machines in the same network.

config :my_app, MyAppWeb.Endpoint,
  http: [ip: {0, 0, 0, 0}, port: 4000]

Finally, on the accessing machine, I entered the IP address of the hosting one followed by the port number on the browser tab. For example, if the IP address of the hosting machine is 192.168.1.10, I would access the app by entering http://192.168.1.10:4000 in the accessing machine’s browser’s address bar.

This setup allows for testing and development across multiple devices within the same network, including mobile phones.