[preview 5] url of api not accessible in react app when deployed on Azure

[JorenSchelkens]

I am not sure if this is the correct place to ask this question.

I have an Aspire project setup with an API and a react frontend like this (omitting other resources that are working fine).

var api = builder.AddProject<Projects.TransportOptimalisatie_Web>("api", "https")
    .WithReference(sql);

builder.AddNpmApp("react", "../transport-optimalisatie")
    .WithHttpEndpoint(3000, 3000, env: "PORT")
    .PublishAsDockerFile()
    .WithReference(api);

When running the AppHost on my machine the environment variables are set and I can make calls to the API from my react app.

.env file in react app:

However, when deploying this to Azure I am running into the following issue. This is the container azd made with the environment variables set:

Now when I navigate to the React app on Azure, the environment variables are empty strings in my React app.

I also went a checked the environment variables in the container itself and they are correct and present (I used env in the console of the container).

Here is the Dockerfile that is used to create the image of the react app, maybe I need to add something here.

FROM node:14-alpine AS builder

WORKDIR /app

COPY package.json package.json

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.21.0-alpine as production

COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

If I forgot to post anything else that might be relevant I will try to reply as fast as I can.

[davidfowl]

There's a section in the preview 5 release notes about this https://learn.microsoft.com/en-us/dotnet/aspire/whats-new/preview-5?tabs=dotnet-cli#no-more-exposed-endpoint-selection-in-azd

[colinnuk]

I dont think this is related to Aspire. It looks to me like you are building a transpiled SPA and serving it with nginx.

When you're running the website via npm, the npm webserver you are using adds the environment variables inside the React application as part of process.env. But now that you are serving the JS files directly from 'disk' - the environment variables aren't available to the JS code as process.env doesn't exist.

One option is to write a JS file which contains the values you need, and then reference those as needed in your React code. When you're running the app via npm you would use process.env values, and when it's deployed with nginx you'll be reading them from the config JS file.

The information about this online is pretty fragmented, and everyone has a slightly different solution. You could try doing something like this: https://stackoverflow.com/a/69659325

In effect that Bash script does a sort of 'find & replace' on the source files and writes the environment variable values into the JS file that is then served to users.

[JorenSchelkens]

I manged to implement something similar to this and now I am one step closer to a full working project. Thanks!