Quick WSN: Serve Angular App on Local Network for Responsive Device Previews
Ria Pacheco
Posted on September 5, 2022
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?
- Get your IP Address
- 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
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 [replace192.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
💖 💪 🙅 🚩
Ria Pacheco
Posted on September 5, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
angular Quick WSN: Serve Angular App on Local Network for Responsive Device Previews
September 5, 2022