Injecting runtime environment variables for a React App

[vonphlpp]

Hi, I tried to add Environment Variables without any success. I'm using React in the frontend.

1. Added ENV to SSM

aws ssm put-parameter --name ENV1 --value myValue --type String
 --tags Key=copilot-environment,Value=test Key=copilot-application,Value=myAppName

2. Added to manifest.yml

secrets: 
  ENV1: ENV1

3. In my project

process.env.ENV1

I also tried to use
process.env.COPILOT_APPLICATION_NAME

--> I don't get the envs-value

4. Gave app-env-service-ExecutionRole the AmazonSSMFullAccess role

5. Pushed the changes to Github

6. Codepipeline is running without any problems

I don't get the value in my code injected. I don't understand how I get the env's in my Docker-Image.
Do I need do specify the env's in my prod.env file or in my Docker-Image?

[efekarakus]

Hi @vonphlpp !

The steps that you have taken look good to me, the only difference that I see between the docs and above is the type of the SSM parameter: String instead of SecureString.

When you open up the console do you see the environment variables available under the containers tab?

I believe the reason why this is happening is that your React application expects the environment variables at "build-time" (while building the docker image), whereas Copilot passes down these variables at runtime (running your built image). I believe you'd need to wrap your React service around an API like with Express.js. The explanation under "Runtime variables" in this blog post (https://medium.com/@adostes/using-environment-variables-in-a-react-application-ac3b6c307373) should apply to your service as well.

[vonphlpp]

Thx for your answer. I ended up with this solution: https://github.com/kunokdev/cra-runtime-environment-variables

[efekarakus]

Awesome!