Relatively new to working with react. I have an application that is working fine in local docker. I populate a bunch of REACT_APP_ environment variables by exporting them to the environment before starting the docker container.
Now, I'm trying to deploy this to a kubernetes pod by running a yarn build and then serving up the build. I see that the environment variables are available on the pod itself by looking at printenv but the application doesn't appear to be picking them up.
Is there something special with serving a production build of a react-app to get it to see the exported environment variables that I'm missing?
I don't want to embed an .env file into the built docker image for security reasons, so I'm hoping that running a react build via serve can still pick up exported REACT_APP_ environment variables that are set via kubernetes secrets.
So apparently, whenever you build a react application with npm, static files are produced that don't know anything about any environment variables you may try to inject at runtime with Kubernetes.
The article below does a good job of explaining this and why they choose to attach the environment variables to the JavaScript window object since it has application-scope available to it.
Making a React application container environment-aware at Kubernetes deployment
Related
REACT_APP_API_KEY=**
REACT_APP_FIREBASE_API_KEY=**
Using in the below style in react js for local environment :
process.env.REACT_APP_FIREBASE_API_KEY
Note : I am using aws code pipeline and code build for ci /cd.
In Code Build you can edit the Environment and add environmental variables. Click Additional configuration in the console to see it. You can export REACT_APP_FIREBASE_API_KEY there and you it should be picked up by npm run build.
You could also use an .env.production file and commit it to source code. These aren't secrets, are added to the deployed code, so there shouldn't be a security issue.
I've recently built a Nextjs app, which I am hosting on Google Cloud Run.
My app makes some requests to external APIs from the getStaticProps() method.
I would like to be able to point to a different API host depending on the environment (e.g prod or dev) using environment variables which would be set differently for each environment.
I know I can store these variables in environment specific files like .env.development and .env.production however I would like to be able to store these environment variables in the environment variables field in the Google Cloud console for the cloud run service and skip storing them in the files altogether.
I have tried adding in the variables to Cloud Run, but it does not work. I have also tried prefixing the variables with NEXT_PUBLIC_... With no luck.
Did anyone have any tips on how to accomplish this?
Ok... I think I have figured it out now.
I was using Cloud Builds to build my container, and the container runs npm run build before it runs npm run start.
I assume that my Cloud Run variables aren't available at the point in time when Cloud Build is building the project.
So, I think my solution is prob to try and inject the variables at the point when it is building, using substitution variables.
EDIT: Confirmed. If I start Nextjs in dev mode, such that the page is rendered on the server for each request, then the Cloud Run environment variables are used.
To build the Nextjs app for production, I include the environment variables in the Dockerfile that is built by Cloud Build
EDIT: as request, an example of a dockerfile setting the environment variable:
FROM node:16.13-alpine
RUN mkdir -p /usr/src
WORKDIR /usr/src
COPY . /usr/src
ENV NEXT_PUBLIC_MY_API_HOST='https://some.host.com'
RUN npm install -only=production
RUN npm run build
EXPOSE 3000
CMD npm run start
Then you can just reference the environment variable from within your code using process.env.NEXT_PUBLIC_MY_API_HOST
I'm using env variables in my react app, so I don't expose my private API keys publicly. They are set in a .env file (which is excluded from git) like so - REACT_APP_ENV_NAME which works fine during development.
I have added those to the Netlify env configuration from within the site settings panel, but they don't seem to work during production (just showing as undefined). Have any of you had the same problem before/managed to fix it?
You need to use GATSBY_ prefix in your environment variables. So, your REACT_APP_ENV_NAME will be GATSBY_REACT_APP_ENV_NAME in your Netlify back office.
You can check for further information in Gatsby documentation, in this Netlify community thread and in Netlify documentation.
From Gatsby documentation:
Please note that you shouldn’t commit .env.* files to your source
control and rather use options given by your Continuous Deployment
(CD) provider. An example is Netlify with its build environment
variables.
GATSBY_API_URL=https://dev.example.com/api
API_KEY=927349872349798
From Netlify documentation:
Gatsby environment variables
Any environment variables prefixed with GATSBY_ will be processed by
Gatsby and made available in the browser for client-side JavaScript
access. Visit the Gatsby docs about environment variables for more
information.
My current situation:
I have a jenkins pipeline to dockerize my node/express backend and build+dockerize my react frontend after every commit to github. This works so far. I am using docker and jenkins on ubuntu 18.
Problem:
My frontend (of course) can't connect to the backend when on the live server (because the route to the backend is http://127.0.0.1:8080. My first idea was to use environment variables but this is not working since react can't read env variables after built (because it's pure html/css/js). What are common solutions to this problem? I don't want to change the backend to the actual domain every time before I push to the repository and change it back to 127.0.0.1 to work on it again.
I researched some more and environment variables CAN be replaced by their value in build time (which is what I want) when you don't use an npm package like dotenv, but rather define variables that start with REACT_APP_.
More Information
"The environment variables are embedded during the build time" - should have read that before.
You can use env files to define different variables based on the environment
I'm developing an app (front-end app that consumes an API) based on the create-react-app package. I'm using Heroku to deploy and currently have two deployments based on the same codebase, staging and production. These deployments should use different development/staging/production APIs that have different databases.
Is it possible to tell create-react-app to use different env variables based on how I run react-scripts start?
env.development
REACT_API: https://localhost/react_api
env.staging
REACT_API: https://myappstagingapi.heroku.com
env.production
REACT_API: https://myappproductionapi.heroku.com
How would I do this? And is this a good workflow?
Thank you very much!
I had the similar situation having more environments than production and development while deployment was done automatically from Github.
First of all, make sure you are using the deployment buildpack i.e.
https://github.com/mars/create-react-app-buildpack.git
You can add this URL in Settings in your project on Heroku, replacing NodeJS default buildpack for instance.
Full documentation is here:
https://elements.heroku.com/buildpacks/nhutphuongit/create-react-app-buildpack
If you follow the link above, you can see the chapter Environment variables. So, in order that your React App can process custom variables:
Add a one that suits you with REACT_APP_ prefix to your Heroku project environment variables (through Settings in Heroku Dashboard) Note that only the envs with this prefix will be visible in your process.env later so you should amend your code accordingly
Redeploy the application.
This should make the things work. I am sure it is also possible to keep .env file but I prefer to have more control via Heroku Dashboard.