How to access an Angular App running on localhost from mobile devices?
When you develop your Angular app on localhost, you might wonder how it looks like on a real mobile device(phone, tablet, etc.), whether it is responsive to different screen sizes.
To do that, you can load your site running on localhost on your mobile devices when they are connected to the same local area network(LAN) such as connecting to the same WiFi.
StepsPermalink
1. Locate your local IP addressPermalink
Following are how to get your local IP address on Mac OSX and Windows 10.
Mac OSXPermalink
you can get your local IP address by holding down option key and click WiFi icon on your menu bar. You can get your local IP address through this menu. Note the the red circle in the following image:
There are multiple ways to get your local IP address such as via Network Preference or using a command such as ifconfig command. Choose one that works for you.
Windows 10Permalink
you can follow these steps to get your local address(> means next step):
i) Click Start icon >
ii) Choose Settings >
iii) Select Network & Internet >
iv) Select Ethernet or WiFi on the left panel >
v) Select network connection (Ethernet) or Advanced Options(WiFi) >
vi) The IP address next to IPv4 Address is your local IP address
The steps are different if you have a different Windows OS.
2. Ng serve with host flagPermalink
When you serve your Angular app using Angular CLI ng serve command with host flag, you specify the host to listen on.
ng serve --host your-local-ip-address
3. Connect your phone to the same WiFiPermalink
It is important that you connect your mobile devices to the same WiFi local network.
4. Open app on a mobile browserPermalink
Open a mobile browser on your phone then type in the address in this format your-local-ip-address:port-number.
For example: 192.168.1.114:4200
With this, you can load your app in development on your mobile devices.
Futher ReadPermalink
Please check out my other Angular posts if you are interested in learning more about Angular.
Support JunPermalink
Thank you for reading! 
Support Jun
If you are preparing for Software Engineer interviews, I suggest Elements of Programming Interviews in Java for algorithm practice. Good luck!
You can also support me by following me on Medium or Twitter.
Feel free to contact me if you have any questions.
Comments