How do I connect my reactjs frontend and ASP.NET Core backend on ngrok?

I'm new to this and I'm trying to connect my frontend and backend so that it can receive and send data. But I can't seem to get it to work.

This is the code for launchsettings.json on backend:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:56440",
      "sslPort": 44385
    }
  },
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "WebAPIv1._1": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000"
    }
  }
}

While this is the code for proxy.js in frontend:

const { createProxyMiddleware } = require("http-proxy-middleware");
import * as Path from "../Productivity/state/apiRoutes";

module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://localhost:44385/api',
            changeOrigin : true
        })
    )

}

What do I need to do to have both frontend and backend to run on ngrok?

I've tried the connecting frontend and backend by opening up ngrok.yml and change the code inside to:

version: "2"
authtoken: 
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 44385

and run ngrok start frontend backend on ngrok.exe

I can open the frontend url from ngrok and get errors when I try to login to the website-application since it cant connect to the backend, and then I get ERR_NGROK_3004 on backend url from ngrok.

Appreciate any help!

Solution

I've overall found a solution, sorry I'm new. Nothing wrong with the code above at all, just need to use https properly. Ngrok HTTPS

My ngrok.yml file:

version: "2"
authtoken: 
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: "https://localhost:44385"
        host_header: localhost

Then just connect the frontend to the backend by changing the URL paths as Jason said, change it to the ngrok url, I also changed the .env URL path.

In my case it was:

module.exports = app =>{
    app.use(
        createProxyMiddleware('/api',
        {
            target : 'https://ngrokurlsample.ngrok-free.app/api',
            changeOrigin : true
        })
    )

}