Access environment variable for React app

Hello,

I need to point my front-end React application to my backend service both configured in Qovery. I created an Alias for the backend service’s external URL named REACT_APP_BACKEND_URL.

The React application is built using a two stage Dockerfile, that does a Yarn build in the first stage and then Nginx in the second stage.

I appreciate any tips!

Thanks,
Robert

Hello @rjohnson,

Just to clarify, you need to access your REACT_APP_BACKEND_URL env variable from your Dockerfile, is that what you are asking?

By default, all env variables are injected into your container hence accessible at runtime.

If you need to access this env var at build time (in Dockerfile) you need to explicitly declare this variable as ARG in your Dockerfile, you can check this post explaining it.

Let me know if it helps,
Cheers

I thought I had a working solution but I am getting the following URL being used by my React application:

https://zc44c74e5-[REDACTED]-gtw.[REDACTED].meta.cloud/zc44c74e5-[REDACTED]-gtw.[REDACTED].meta.cloud

As you can see the zc44c74e5-[REDACTED]-gtw.[REDACTED].meta.cloud is getting added twice.

This is what I ended up putting in my Dockerfile:

ARG REACT_APP_BACKEND_URL
ENV REACT_APP_BACKEND_URL $REACT_APP_BACKEND_URL

Ok, seems to be solved now. I needed to prepend the environment variable in my React app with “https://” before using it in the app.

Everything seems to be working now. To summarized just needed to do the following:

  1. Add “ARG REACT_APP_BACKEND_URL” to Dockerfile
  2. Prepend environment variable value with “https://” in the React code.
2 Likes

Well done @rjohnson :+1:

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.