Skip to content

[ngrok | Angular] External Access to your Local Test Environment

Georg Höller
Georg Höller
2 min read
[ngrok | Angular] External Access to your Local Test Environment
Photo by Christopher Gower / Unsplash

Sometimes you have to test your local hosted API or website with multiple different devices. They may be on the same network and you can open your local ports in some way to get it working but most of the time it's a messy solution.

Tech Stack

  • Angular
  • ngrok

Starting Situation

I started my angular solution with ng serve and the website is running on localhost:4200
My ASP.NET Web API is running on localhost:7097

ngrok Setup

The setup is easy, just go to their website, create an account and follow their setup & installation.
On step 3 of their setup change the port from 80 to 4200.
Now you should see a forwarding address in the ngrok window - try it on any device which is connected to the internet. You should see your local angular website!

Optional ngrok Config

You can create a config yml file for the ngrok.exe. I'm using the following config:

version: "2"
authtoken: <insertToken>

    addr: localhost:4200
    host_header: rewrite
    proto: http

Start ngrok with the following command:

ngrok.exe start --config=ngrok.yml test

Angular Setup

The website should open but your backend calls will fail because they point to localhost. We are able to fix this with the built in angular proxy.
Add a JSON file to your frontend solution and call it something like proxy.conf.json - I'm adding it to the root folder. Add the following content:

  "/api/**": {
    "target": "https://localhost:7097",
    "secure": false,
    "pathRewrite": {
      "^/api": ""

With this config, every request to localhost:4200/api/<method> will be rewritten to localhost:7097/<method>. So don't forget to change your backend url config from https://localhost:7097 to ./api !

Finally add the proxy config to your angular.json config to automatically use it when you are running ng serve.

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
         "proxyConfig": "proxy.conf.json"

If you have further questions about this topic or need help with a problem in general, please write a comment or simply contact me at :)


Related Posts

Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package @ngx-translate/core.

[Angular] Dynamic App Config and Translations in a Submodule
Members Public

[Capacitorjs | Angular] Back Swipe Support for iOS and Android

Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple! iOS - Native To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the

[Capacitorjs | Angular] Back Swipe Support for iOS and Android
Members Public

[Angular] Routing Helper - a Typesafe Routing Attempt

It always bothered me that you have to define the routing paths as strings. If a route changes, you have to change all references manually. There must be a better way! Routing Constants The constants are for your specific app - here you can define a class which represents your

[Angular] Routing Helper - a Typesafe Routing Attempt