1

I have the ReactJS app deployed on AWS Amplify. Also, the environment variables that I need in js code are in Amplify. How can I use them from my code? How do access them?

ZoeDeep
  • 21
  • 3
  • It's unclear what you are asking for. Your frontend will have no access to environmental variables. Amplify generates 'aws-exports.js' that provides configuration your frontend can use. includes On the backend, if you are using an Amplify Function ( Lambda ) via NodeJS, you can use process.env to get those environmental variables. – gbones Feb 10 '21 at 20:54
  • I have a serverless app that is deployed on Amplify. I'm responsible just for the frontend part, my client works on AWS, including Amplify. I'm not that familiar with AWS services, so not sure how to use these environment variables from Amplify inside my code. So you are saying that I will have no access to them, just on backend? – ZoeDeep Feb 12 '21 at 19:41
  • Amplify generates aws-exports.js that is to be used with the frontend. You can learn more about this, and see a sample here: https://docs.amplify.aws/cli/usage/mock#config-files. For JS Library on the frontend, see this: https://docs.amplify.aws/lib/q/platform/js – gbones Feb 13 '21 at 04:12
  • 2
    I think https://stackoverflow.com/a/67318125/376240 might answer your question. Using this post, I was able to add ENV vars in the Amplify console, then add them to the build step and now I can access them via `process.env.REACT_APP_DEPLOYMENT_STAGE` etc in my React app's frontend JS. – nonbeing May 17 '21 at 07:30
  • Does this answer your question? [How to add environment variables to AWS amplify?](https://stackoverflow.com/questions/64072288/how-to-add-environment-variables-to-aws-amplify) – Pablo LION Sep 26 '21 at 03:48

1 Answers1

-3

Assuming you want to access these in the front end application:

During the build process, environment variables can be accessed via ${VARIABLE_NAME}. You can then set a react environment variable during the build process. If you are developing your app with a frontend framework that supports its own environment variables, it is important to understand that these are not the same as the environment variables you configure in the Amplify console. For example, React (prefixed REACT_APP) and Gatsby (prefixed GATSBY), enable you to create runtime environment variables that those frameworks automatically bundle into your frontend production build. To understand the effects of using these environment variables to store values, refer to the documentation for the frontend framework you are using.

Assuming you want to access these in the back end application:

You can access environment variables in React through process.env.VARIABLE_NAME and pass these through to the backend.

Amazon provides a comprehensive overview of how to store and access Amplify environment variables:

https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html

KCP
  • 23
  • 3