将 Appsettings.json (.core) 中的 url 参数传递给 React

Question

I am trying to access the url parameter inside the appsettings.json file. The reason is that the api URL differs from Development to publish. I am not entirely sure the best way to solve this.

I've found a solution that could work:

how to get config data from appsettings.json with asp.net core & react

As I've understood from above thread, I need to create a service and call it from React? This seems abit wierd since I always(?) need to do a API request to the same project to recieve the URL which is needed for the API requests.

The other suggestion is to use webpack, or somehow save the url in the clientside. But won't this mean that whenever I need to change environment, I need to change that in 2 places (backend & frontend)?

This is how my appsettings.json file looks (same variable but different values for.Development and.Publish).

{
    "Url": "localhost:44000"
}

In my Startup class I am getting the value:

    var urlValue =
        _configuration.GetSection("Url");

Can't I somehow get the value once depending on environment from the backend and recieve it using React?

Not sure if I am thinking wrong here?

Would appreciate if anyone is able to point me to the right direction.

Answer 1

My solution to this is using.env documents but still using.core launchSettings env.

For this solution to work, I was in need of env-cmd:

npm install env-cmd

Added 3.env files:

 1. .env
 2. .env.development
 3. .env.prod

Each file contains a url string:

REACT_APP_Url = https://localhost:44000

I added env check in.core startup file:

    app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
                else if (env.IsProduction())
                {
                    spa.UseReactDevelopmentServer(npmScript: "build");
                }
            });

When I am running production code - I am refering to "build", so in my case the object "build" is going to run.

package.json file:

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "cross-env env-cmd -f .env.prod react-scripts start",
  }

I can now access the url by using: {process.env.REACT_APP_Url}