Question 101504 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

}

  2. 0

    Where you host your applciation? Kestrel or IIS? The launchsettings.json file is only applicable to Visual Studio or other compilers, if your project is launched through Kestrel, you need to add the following code.

    builder.WebHost.UseUrls("http://0.0.0.0:5000");

    In my sample you could find I am using 5031, you need change to 5000.

    enter image description here

    Suggestion

    1. In your visual studio choose WebAPIv1._1, then start.

    2. I haven’t tried to use ngrok.yml, so suggest you use command to expose the backend application port. By using

      ngrok http 5000

    3. You can change setting like below

      "WebAPIv1._1": {
 "commandName": "Project",
 "launchBrowser": true,
 "launchUrl": "swagger",
 "environmentVariables": {
   "ASPNETCORE_ENVIRONMENT": "Development"
 },
 "applicationUrl": "https://localhost:5001;http://localhost:5000"
}

    4. The change the targetUrl,like below

      module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://fd78-167-220-255-54.ngrok-free.app/api',
            changeOrigin : true
        })
    )

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search