Setting env variable in container after build

How Do I?
1

I have an app with React frontend which sends requests to backend. The URL of backend is set via env. variable inside React app.

My question is: is it possible to set this variable after building a container?

I don`t want to set a value during build, because my image is built already and stored at Docker Hub.
I have tried different ways of doing it but had no success.

I deploy to Okteto using docker-compose.

I also tried to set env. variable in docker-compose file, but after deploying it is visible only in pod, but not in a container.

2

After some more research I should clarify my question.

I found out that env variable is present in container, but for some reason it is not being substituted with it’s value in app. I’ll explain:

In my app there is a variable REACT_APP_API_HOST which sourced from system env variables. In docker-compose I created the same variable as below:

    environment:
      - REACT_APP_API_HOST=${API_HOST}

I also created a secret API_HOST with value of my backend URL:

API_HOST=https://backend-vitalykolesnikov.cloud.okteto.net

After that I deploy my app on Okteto and go to frontend pod specs and I see:

  containers:
  - env:
    - name: REACT_APP_API_HOST
      value: https://backend-vitalykolesnikov.cloud.okteto.net:8080

So everything looks OK. But when I open my frontend app, it sends request to:

https://**frontend**-vitalykolesnikov.cloud.okteto.net/**undefined**/api/v1/...

But this URL expected to be:

https://backend-vitalykolesnikov.cloud.okteto.net:8080/api/v1/...

If I build the container image with hardcoded var and value, everything works as expected. But I want to set the backend URL after building image.

Sorry for long text and I hope the problem is clear now.

3

Hi Vitaly,

If I understood your questions correctly, the issue you are seeing is because your react app is compiled when okteto builds the container. This means that although the environment variable exists at runtime, the frontend does not read it because your react app already has already been built and the host string is embedded in the *.js static files.

Does this make sense? How are you serving your static files?

If you want to set the variables at build time you can use the args from the build section of the manifest: Okteto Manifest | Okteto Documentation

1 Like
4

maroshii I think this is the case, I should examine my app and the ways it can read env vars dynamically.

Thanks for answer!

1 Like
5

Import-meta-env | Startup/Runtime environment variables solution for JavaScript might be of interest to that end?

Or if your prefer to have more control/customization you could use also try more vanilla linux CLI tools like envsubst, e.g. Making environment variables accessible in front-end containers | Red Hat Developer

1 Like
6

nicklas Yeah this may help. And I also found react-inject-env library.
Will try to implement one of these solutions.
Thanks!