View your Angular local development environment on your phone

In this post I will show you how ngrok has become an invaluable tool for testing responsive designs – especially on mobile phones. It’s probably the easiest local development tunnel I’ve ever used. Let’s get started:

Step 1 – Setup & Installation

Navigate to https://ngrok.com/ and click the “Get started for free” button. Once you create a free account, you’ll find yourself on the dashboard page with a set of small instructions:

ngrok home page
  1. Download the ngrok zip file for your OS
  2. Unzip the file that was just downloaded $ unzip /path/to/ngrok.zip
  3. Connect your account with the token they provide you `$ ./ngrok authtoken your_token_should_be_very_long_3485994389

Step 2 – Serve & Connect

I’m running my local Angular development environment on port 4200. Please change the port number in the following commands if you’re running on a different port.

With your local Angular development server running in the background. Run the following in your terminal:

$ ./ngrok http 4200 -host-header="localhost:4200"

After which your terminal will look like the following which means your local development tunnel has opened.

ngrok terminal

Simply copy and paste the “Forwarding” address into the URL of any phone, tablet, or really anything else you want to view your local development server on and you should see you Angular application!

To quit the local development tunnel run Crtl + C.