Quick WSN: Serve Angular App on Local Network for Responsive Device Previews

What

Enable a live preview of your Angular application on any device on your local network, including laptops and mobile devices. This works by enabling the typical :4200 port with your devices' local network IP address (not internet).

So, what?

Useful for previewing applications on smaller device screens for responsive design; and for debugging inconsistencies rendered by different browsers on different devices and/or operating systems.

Now, what?

1. Get your IP Address
2. Run your app's port on it

---

Skip to Step

• Find and Copy Local IP Address
• Host Application on IP Address
• Result

---

Find and Copy Local IP Address

Get your local IP address from the command line

# for Mac machines connected via ethernet
ipconfig getifaddr en0

# for Mac machines connected via router
ipconfig getifaddr en1

# for Windows machines
ipconfig

---

Host Application on IP Address

# Command Line
ng serve -o --host 192.16x.x.xx

• -o opens in browser
• --host enables address following flag to act as host [replace 192.16x.x.xx with address returned from first step's command]

---

Result

Any device, on the same network (ensure wifi is on) can preview application via http://192.16x.x.xx:4200