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
  • ASP.NET Web API
  • 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>

tunnels:
  test:
    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"
     }
}

Angular

Comments


Related Posts

Members Public

[Angular | Capacitor] Interact With Your Native Calendar

Recently I had do to implement a simple task: When the user presses the 'save appointment' button, the app should add this event to the native calendar. My first thought was saving an .ical file and open it, till i recognized that this isn't the most user friendly way. After

[Angular | Capacitor] Interact With Your Native Calendar
Members Public

[Angular] Native iOS and Android App - Capacitor

In this blog post we will go through the initial process of how to convert an existing angular project into a cross-platform project. Our focus is on iOS and Android. In addition to this, I show you how to speed up developing and especially testing the app. Setup * Code Editor

[Angular] Native iOS and Android App - Capacitor
Members Public

[Angular | nx.dev] Adding NGRX - State Management

Recently I uploaded a post about creating a single project workspace structure using nx.dev and angular. Now it's time to add ngrx [ngrx.io] to our newly created project. I will continue with the project structure from the previous post. [Angular | nx.dev] Single Project Workspace StructureThe concept of

[Angular | nx.dev] Adding NGRX - State Management