Accessing Localhost from Different Devices

Front-end web developers use responsive simulators in their browsers when developing responsive layouts. This handy feature can be accessed by the shortcut Super/Command/Control + Shift + M in both Chrome and Firefox. The device toggle view is particularly useful for easily switching between various device sizes during the development process.

Occasionally, I experience unexpected layout issues when testing on actual devices. Now, when I work on responsive design for small screens, I use real mobile device for development. It turns out that reaching the Localhost server from any device in the same network is quite straightforward.

Obvioustly reaching localhost:3000 from another device won't work. We need to figure out the correct IP address of the development machine.

Inside the Terminal we can enter the following command for respective OS:

// Linux Desktop
nmcli device show

// Mac OS
ifconfig

// Windows
ipconfig

We get some data returned, and we are interested in IPv4 Address (example: 192.168.X.X). In our case server is running on port 3000, we'll add :3000 to ip address. We can now access localhost development server by visiting: 192.168.X.X:3000 from any other device.