Can I setup ngrok for front-end and back-end at the same time?

Question

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.

Answer 1

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).

Answer 2

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