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;
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.
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.
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 have an app ready for production. For it to work, each client needs to set a unique url to access their data. How would i prepare the app for making it easy to add a url as an access point to the clients?
Would a correct way to do this be to add it in the manifest.json file and somehow reference it from there? (Until now in development i've only used a global URL in a js file)
You need to install the package dotenv package and create a .env file in your root directory which should contain your environment variables.
Assuming that the URl you are referring to is http://localhost:3000/some/url on your localhost, then your .env file might look like:
MY_URL=http://localhost:3000/some/url
Then in your react application, you can get the value of MY_URL by doing:
const url = process.env.MY_URL
Note that if you are using the create-react-app package, then you do not need to install the dotenv package since it already comes with the create-react-app package. Also you need to change it:
REACT_APP_MY_URL=http://localhost:3000/some/url
Also make sure to add the .env file to your .gitignore file so that you do not push it to your repo.
Assuming that you are deploying your application to Heroku. Heroku provides a simple interface which allows you to add your environment variables which looks like:
That's it.
Maybe you could store them in environment variables?
that way you can always edit them later without having to change components.
I'm in the process of doing my first deployment of a node.js app on Heroku. While running the app locally I stored API keys and other configuration variables in .config files excluded from version control.
Heroku seems to have built-in support for a ".env" configuration file in the project root and I've refactored my server code to support this. My question is where is the best place to store configuration variables that need to be accessible in the client? I'm running angularjs on the front-end and need to be able to access various API keys.
Is there some way I can reference the same .env file or should I be approaching this differently?