node.js - How to add environment variables to AWS amplify?

Question

I have a React/Node app which i am trying to host on AWS amplify. first try, my app deployed but i saw some pages are not loading due to lack of the environment variables. i have added them to the AWS console before deploying and it did not work. then i did some search and i saw that i need to modify "amplify.yml" file to:

build:
  commands:
    - npm run build:$BUILD_ENV

but not only it did not work, also the app is not working anymore. any ideas?

Answer 1

As this question specifically references React, here are the steps you need to use environment variables in your React based application in AWS Amplify.

In your client-side JS:

const BUILD_ENV = process.env.REACT_APP_BUILD_ENV || "any-default-local-build_env"; 

The key thing to note here is my pre-fix of REACT_APP_ which is covered the Create-React-App docs: here

Now, in your Amplify console, under App Settings > Environment variables:

Finally, you also need to add this reference under App Settings > Build Settings:

Note: "BUILD_ENV" can be any string you wish. Within the environment variables you can provide the necessary DEV / PROD overrides.

DO NOT store SECRET KEYS using this method, AWS provide a secrets manager for this. This method is for publishable keys, like connecting to Firebase or Stripe and the key is fine to be public.