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"
     }
}

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 yesreply@georghoeller.dev :)
Angular

Comments


Related Posts

Members Public

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n

Install packages npm i -D @nx/storybook npm i -D @storybook/angular Create config nx g @nx/storybook:configuration I created the config inside the main app to share some configs/modules. My stories are located at libs/shared/ui. That's why I had to add these lines to the

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n
Members Public

[Angular | RxJS] BehaviorSubject with custom states

Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.

[Angular | RxJS] BehaviorSubject with custom states
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