如何在 React 应用程序中使用 AWS Amplify 环境变量？

Question

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?

Answer 1

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