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

Ria Pacheco - Sep 5 '22 - - Dev Community

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

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
Enter fullscreen mode Exit fullscreen mode

Host Application on IP Address

# Command Line
ng serve -o --host 192.16x.x.xx
Enter fullscreen mode Exit fullscreen mode
  • -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

. . . . . . . . . . . . . . . . .