9

I want to setup ngrok for front-end as well as back-end at the same time which is not possible by the way because my front-end is on Angular 6 and back-end is in the .net core.

I implemented ngrok when both front-end and back-end were on the same host and port. (Both was in .Net and MVC). So they were running on the same port.

Now, I want to know if there any alternative way to do this.

My Angular 6 runs on http://localhost:4200/ Back-end runs on https://localhost:44343/

Please Suggest me if any.

Karan Patokar
  • 465
  • 1
  • 8
  • 21

3 Answers3

17

I've found a solution using tunnels for both back and front end, defining them in the ngrok.yml config file. This file in Windows is usually found on C:\Users\you\ .ngrok2\ngrok.yml.

authtoken: <your token is already here>
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 1337

Where my ports are 3000 for React.js and 1337 for Sails.js.

To lift the ngrok service: ngrok start frontend backend

Ngrok will redirect two ports and provide two addresses instead of one (four in total, if you consider https).

Finally, I've changed the API address on the frontend using the new URL found in the ngrok CLI (you will identify it by looking at the port number).

I came to that solution reading a similar post (you can find details here) and not using the "subdomain" part (which is available only in ngrok paid service).

Moisés Baddini
  • 313
  • 3
  • 9
  • 2
    Been trying to use other tunnel providers with no success or tunnels being very unstable. Just wanted to comment here to thank you! Quick and easy solution to my issue. – Aris Plexidas Mar 25 '22 at 15:25
1

Good question! I have a similar problem and I made my backend locally behave like a proxy server for frontend paths so it routes the incoming frontend requests to the local frontend server. In Python, it was easy with Flask, using the proxy method described here: https://stackoverflow.com/a/36601467/38611

jbasko
  • 7,028
  • 1
  • 38
  • 51
0

Another solution, one that would not require you to change your API address to the ngrok URL each time you create a new ngrok instance, is to proxy your front-end API calls to a relative URL such as /api. @Yuro-Fedotov explains how to do this for a React app in this post:

First, you can configure proxying to backend from your development server. This will enable your frontend to access backend through relative URLs (like /api instead of localhost:5000/api) from any location. In order to do this, you should add "proxy": "http://localhost:5000" to your package.json and then make sure your backend requests don't match something you have in your frontend, preferably by using a prefix. More details here.

Alternatively, if you're working with webpack, you can set up devServer.proxy to do the same thing.

This way we can now do

const BASE_API_URL = '/api'; // previously 'http://localhost:5000'
fetch(BASE_API_URL, options);

and the app running on the ngrok agent will make the call to /api, then the local dev server will convert it to http://localhost:5000.

dyslexit
  • 689
  • 1
  • 9
  • 18