How to access an Angular App running on localhost from mobile devices?

March 10, 2019  2 minute read  

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.

Steps

1. Locate your local IP address

Following are how to get your local IP address on Mac OSX and Windows 10.

Mac OSX

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:
WiFi information by holding option key and click

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 10

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 flag

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 WiFi

It is important that you connect your mobile devices to the same WiFi local network.

4. Open app on a mobile browser

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 Read

Please check out my other Angular posts if you are interested in learning more about Angular.

Support Jun

Thank you for reading!    Support JunSupport Jun

Support Jun on Amazon US

Support Jun on Amazon Canada

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