Pass url parameter from Appsettings.json (.core) to 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.

arkhz · Accepted Answer · 2020-07-01 14:08:01Z

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}

Does this not mean you have to hard code values in both backend and front end app configs?
@Hawkzey If I remember correctly, no it was not needed since we didn't have any use of the API inside the backend config files. If you got any better solution feel free to post. And if I remember correctly, we did change our solution since we later got other needs. We did involve mapping from the backend to certain url requests like : app.map("Api" ... inside Configure in the startup file.

Collectives™ on Stack Overflow

Pass url parameter from Appsettings.json (.core) to React

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related