Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
Markdown Monster - The Markdown Editor for Windows

Using Angular's Live Reload Web Server to Refresh Pages on a Phone


:P
On this page:

Angular (and really any of the major JavaScript UI frameworks that integrate with the WebPack Dev Server) provides a built-in Live Reload Web server that makes it quick and easy to see UI changes updated in the browser as soon as you make a change to your code, HTML or CSS content.

What's not so obvious: How do you get the live reload functionality to also work on a phone by connecting to your development machine, in order to be able to preview and tweak the layout quickly and just as easily as in a desktop browser? Turns out it's not that hard, but there's a bit of configuration that's required to connect the phone and desktop machine properly.

When you get it all going you can happily work like this on a mobile device:

In this post I'll walk you through what you need to know in order to set up the Angular Dev server to:

  • Serve content and allow external IP Access
  • How to connect to the your server on the local network
  • Set up your firewall
  • Bonus: capture the phone output on your desktop screen

Not just for Angular

Although I specifically discuss the Angular Dev Server in this post, most other frameworks like Vue and React also use the same WebPack Dev server, so you can use the concepts described here with those CLIs as well. The syntax may be different so check the specific CLI documentation for host binding.

Live Reload Server

Angular and a number of other tools use the WebPack development server. By default this server is set up to run as a local Web server, but you can set it up quite easily to also serve IP traffic externally. It's not quite obvious, and in the past I've been doing this the hard wrong way, by building the app and then running it through another always on Web server (IIS). This works but it's not exactly quick since building the app for final output can take a while. Making a change then takes some more time.

Turns out - there's an easier way: It's quite easy set up the WebPack Web Server to externally expose an IP address, which would allow your phone to access the live reload server over the local network.

In Angular you run the live reload server with:

ng serve

using the Angular CLI. This starts up the server locally. Using just the default ng serve you generally use localhost:4200 to access the Web server:

http://localhost:4200

This is what the dev server is designed for and that of course works. But if you try to access the local IP address directly:

http://192.168.50.111:4200

you'll find remote access doesn't work with the default configuration.

Exposing your IP Address: Host Ports

The problem is that by default the WebPack server is bound to localhost. localhost is the local loopback adapter or 127.0.0.0 which does not expose itself to the network - it's entirely internal and in fact doesn't even hit the network interface. So using the default is not going to let you connect to the dev server.

This is actually a good default as it ensures that there isn't an accidental security leak via external network access . For typical dev scenarios running on localhost is perfectly reasonable.

Phone Testing is Painful

But if you want to check out your application on the actual phone or other mobile device, the process can be painful. Before I realized I could actually expose an external port in the dev server, I used to:

  • Build my Angular into the distribution folder
  • Point my local Web Server (IIS) at it

That works, but it's sloooooow... the build takes a while and then making changes requires another complete build. Meh!

Exposing a Host Port in Angular

Turns out Angular has easy options via its ng serve can be set up to bind to a specific port. As mentioned localhost or 127.0.0.0 are local IP addresses, so rather than using those you can bind to:

  • A specific machine IP Address
  • 0.0.0.0 which is all local IP Addresses

So to launch the Angular Dev server with external port access enabled you can use:

ng serve --host 0.0.0.0

which gets you:

Notice that the server is letting you know that you're exposing the server to the network and is warning that the server is not meant to be a hardened Web server and not secure for external access. But for development testing it certainly is sufficient.

You can also be more specific about the IP address:

ng serve --host 192.168.50.111

Voila now you can can access the server remotely!

Finally you can also set the host in the angular.json configuration file:

{
"projects": {
    "MyProject": {
        "architect": {
            "serve": {
                "options": {
                    "port": 4200,
                    "host": "0.0.0.0"
            },            
        }
    }
}

}

With this you can now simply run ng serve to get external access.

Firewall

If you're on Windows you'll likely also have to add a Firewall exception rule to enable remote access to the firewall. This creates one using PowerShell:

# Launch as Administrator
netsh advfirewall firewall `
   add rule name="Angular Dev Server :4200" `
   dir=in action=allow `
   protocol=TCP localport=4200

Alternately you can add it in the Firewall app:

Accessing the Application From your Phone

Accessing the application from your phone now should work via the server's IP address. Unfortunately you'll need to use an IP Address rather than a domain name so a local network URL like this works on your local WiFi network:

http://192.168.50.111:4200

Note that the WebPack Dev Server does not support host header resolution, so AFAIK you can't use a domain name like myapp.server.com even if that DNS name is mapped to the appropriate IP address. AFAIK you have to use the IP Address.

If you're testing on your local network, make sure that your mobile device is on the same network segment as your development machine. I often use a wired connection for my laptop and the phone on the wireless subnet - these are different and can't directly see each other on my network.

Several people asked what I was using to mirror the iOS phone screen on my machine. I'm using 5kPlayer, which among many other cool features can act as an Apple Air Play server. You basically start the air play server in the application and then connect to it from the phone. It's very smooth and seems very reliable. Turns out that was very useful for capturing the screen capture at the beginning of this post 😃

Summary

As mentioned at the beginning, this approach should also work with other CLI's that use the WebPack Web server. Both the Vue and React CLIs also use the WebPack web server, so with perhaps slightly different syntax the same approach can be used, so this isn't Angular specific.

I feel a bit silly it took me this long to realize I can get Live Reload to run on my phone. All that wasted time building and explicitly navigating, when all along I could have been just putting the phone in always on mode and watch things change! Having this functionality - especially on the phone - is a huge time saver especially on a recent mobile first project I'm working on.

So maybe I'm not the only one who didn't think or even think about the Angular Dev server as a remote Live Reload server that can work for live reloading on a mobile device. Even though domain names don't work, once you've manually typed in the IP, you're done - just leave it sitting and it'll do its own refreshing. Yay - good times and more productivity ahead...

Resources

this post created and published with the Markdown Monster Editor
Posted in Angular JavaScript  

The Voices of Reason


 

JO
June 24, 2020

# re: Using Angular's Live Reload Web Server to Refresh Pages on a Phone

I usually use Chrome's device simulation mode available in the DevTools where you can select various iPhone and Android device display dimensions. Probably not 100% accurate, but Safari also uses webkit for layout, so for styling it's probably pretty close. I don't know how many times I've suffered with some less than optimal solution like you described before I finally got irritated enough and investigated if there was a better way only to find there was and I should have been doing it for longer. It's a lot for sure.


Rick Strahl
June 24, 2020

# re: Using Angular's Live Reload Web Server to Refresh Pages on a Phone

@Jo - yes those tools are available but they don't usually render anything like what actually renders on the phone. I'm using my every day iPhone and a burner Android device for testing and they render vastly different than what you see in those Chrome resized previews. They work in a pinch if you want to get a general idea what things look like, but if you need need to tweak layout and see what things like line and box wrappings look like there's no substitute for running on an actual device.

Before - with the build and deploy then test cycle - I would be more inclined to do what you describe, but with the ability to run on device with live reload it's so easy that there's little reason to not do it.


Ndaba
September 21, 2020

# re: Using Angular's Live Reload Web Server to Refresh Pages on a Phone

Thanks. This works, but fails for websockets connections for live updates testing on mobile device. I have tried the --disable-host-check option, but it does not seem to get around the issues as websocket for live updates will not connect as it tries to use http://localhost:4200 . Do you know how to connect?


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024