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:
- Download the
ngrokzip file for your OS
- Unzip the file that was just downloaded
$ unzip /path/to/ngrok.zip
- 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.
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.