Wondering if you could provide some info on how to access env variable from the front end. We’ve tried using REACT_APP_ and NEXT_PUBLIC_ prefixes but it seems that neither of them work.
For most frontend frameworks such as Create React App (prefixed with REACT_APP_) and Next.js (prefixed with NEXT_PUBLIC_) the environment variables need to be provided at build time so that they can be embedded in the application.
If you’re using Dockerfile Deployment, you can access the App’s configuration when your image is built by following the instructions in the Accessing Configuration Variables during the Docker build documentation. The Dockerfile instruction to build the application with the environment variables would look something like this:
RUN set -a && . /app/.aptible.env && npm run build
You’d need to re-build the image whenever the configuration is updated in order to update the application. If you’d like to deploy and update the configuration at the same time see the Synchronizing Configuration and code changes documentation for details on how to do so.
For Direct Docker Image Deployment, you’d have to provide the variables when the image is built, similar to Dockerfile Deployment, or develop a custom solution to get the App’s configuration from the container’s environment at runtime. Some examples include:
- This solution which modifies the JavaScript code to change variable definitions. Theoretically, you can use this to modify the code when the container starts.
- Adding a special route to the app’s webserver (i.e. Nginx) that returns the configuration then, when the user accesses the app, use this route to get the configuration.
- Similar to the above, pull the configuration from an external source such as S3 or the backend when the user accesses the app.
The Direct Docker Image Deploy solutions can also be used with a Dockerfile Deploy if you’d like to read the variables at runtime instead of having to provide them at build time.