I currently have a create-react-app deployed on my Heroku server, and I'm using the mars/create-react-app-buildpack.
I would like to be able to change the Heroku REACT_APP_ config variables on Heroku, and have them used in the React App.
Right now, they config variables are only picked up once when I call git push heroku master which means I need to redeploy for the config settings to change.
Has someone been able to find a workaround for this?
I found out this is already handled by #mars/create-react-app-buildpack with runtimes configuration variables.
You can use them in your react app as follows: https://github.com/mikehanssen/create-react-app-buildpack#runtime-configuration.
Related
I just deployed a React app on HEROKU (the app is made from create-react-app).
My app's file are on Github and I set up HEROKU to point to that github repo.
My app uses an API key. Normally (when I spin up the project locally) that API key is being accessed from an .env file at the root level and I access it with the dotenv package. However I'm not committing this .env file to github (.env is in gitignore).
I understand that HEROKU needs to know about this API key. So, I went to the settings page of my HEROKU app and added the API key there. However I'm not sure I'm doing this correctly since the API is not working.
This is how I'm entering the API key in HEROKU's settings (I've also tried this with just REACT_APP_LASTFM_API_KEY - not the process.env. before it):
And this is how the API key is being used in the app (the variable is process.env.REACT_APP_LASTFM_API_KEY)
const url = `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${artist}&api_key=${process.env.REACT_APP_LASTFM_API_KEY}&format=json`;
The environment variables declared in the Heroku settings are specific for processes that run on Heroku itself.
Since your app will run on a client's browser, the react app will look for those environment variables in the client's browser.
The only job of Heroku is to host & serve static files. These static files that Heroku serves must have these environment variables embedded in them & this is exactly what CRA react-script does for you.
Please know that this isn't specific to just Heroku, the same holds true for say Azure or Cloud run.
So I have .env added to my .gitignore and in my .env file I have
REACT_APP_WEATHER_API_KEY=123456
This was a recent add on, I already have this app fully deployed and working on Heroku. Do I just go to settings => Config Vars and add key=REACT_APP_WEATHER_API_KEY and value=123456? How would I go about implementing my API key into Heroku within the settings?
You don't need key= or value=, just set REACT_APP_WEATHER_API_KEY to 123456 directly, either via heroku config:set:
heroku config:set REACT_APP_WEATHER_API_KEY=123456
or the dashboard.
The .env file you're using in development and Heroku's config vars are both just convenient ways of setting environment variables:
Config vars are exposed to your app’s code as environment variables. For example, in Node.js you can access your app’s DATABASE_URL config var with process.env.DATABASE_URL.
As long as you are using the REACT_APP_WEATHER_API_KEY environment variable when your React application builds, or at runtime from your back-end (if you have one), you should be in business.
I'm trying to understand how I can hide API keys and still run my Heroku projects in the browser. I understand how I can add an environment variable within a .env file and then add the .env file to the .gitignore file which successfully hides the file containing the key from GitHub. However, when I try to push the latest commit from the remote repo in order to get the latest version of the project with Heroku, the hosted project does not work because it does not see the key that it needs to use.
Once I figure out how to get the hosted Heroku project to work with the latest GitHub commit that hides the key, I would like to figure out how to configure the key to only work with the domain of my project and not work with any other domain address since I know that it's still possible to find the key within the source code if it's not hidden using a backend server. I haven't gotten around to learning about backend so I would want to learn how to make the key only work with my domain. Thank you for any responses.
What you can do is set the API key as a config var in the settings section of your heroku dashboard by going to your heroku app, clicking on Settings and then scrolling down the config vars.
Alternatively, you can do this through the heroku cli with heroku config:set. Check out the heroku docs here on both of these options
Update: To access the config var, you use the same syntax as other environmental variables.
For example, if you set a configuration variable called API_KEY with the value being ABCDEFG, the way you'd access it in your code (with react):
var myKey = process.env.API_KEY;
I was wondering how I can set environment variable in React to hid my API key?
I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.
In my .env file when I have:
REACT_APP_API_KEY="my_api_key_etc"
In my app.js I have:
const apiKey = process.env.REACT_APP_API_KEY
when I console.log(apiKey) in development (npm start): it shows my api fine, but when in production mode (npm run build): it shows undefined.
I have already tried to create two more files like .env.development and .env.production and still that didn't work.
Also I made sure my .env files are outside of my src folder.
Do you guys think it has something to do with Netlify?
Thanks in advance!
Ideally you should be setting these variables in your dashboard instead. Head to your Project settings, and add this, and any other variables under 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.