Make your angular app accessible remotely during the development
During the development phase, It's easy to build a good UI when the web app is accessible remotely in your local network.
Recently, after deploying a web application, I got an email from an user saying that the design was awful on his tablet. It wasn’t responsive (To learn a bit about it read this article from Obominuru Elijah).
I bought a tablet to test the UI. To make my web application accessible on my tablet, I get struggle a bit, but at the end it works!!!
Here is how I did it!
How to
One way to do it, it’s to use ng serve from angular/cli. Just run this sequence of command first.
Then get your IP address using either nmcli or ifconfig or ip addr show and open your browser into the device at the address http://ip-address:4200. The port 4200 is the default port. You can change it by running this command.
Another way is by using http-server package. You start by installing this package globally.
Then, you must compile your application for the production. For that, you use ng serve
Once done successfully, you now use http-server like this
You will get the answer on your console. Just take the IP and follow the same step like the one described up there. The default port on which http-server will serve your app will be 8080. Of course, you can change it. Learn how to do it by reading documentation on its Github repository.
Don’t forget the firewall
If you don’t take care of the firewall nothing describe up there will work. You must allow the traffic on the port 4200 or 8080, depending on the process you choose to follow, to make it accessible from other computers of your network.
Iptables
One of the most popular tools for allowing traffic on linux systems is Iptables. To allow traffic on port 4200 and 8080 on your computer (the one from which you run the commands above), you can use this command.
You can run only one of the commands between the two first, depending on the method you use.
ufw
You first need to install it. Depending on your Linux OS, run the corresponding commands
You now have to enable ufw to make it works, then allow the traffic.
After doing that, everything should work perfectly.
Important to know
You are not obliged to allow traffic on the both ports and you must (it’s a recommendation). It’s strongly advise to allow traffic on port you are using. Also, improve it to make it only available for users of your local network.
Thanks!
