How to Deploy an App to Heroku with .env Keys and Tokens

Vannida Lim
Webtips
Published in
2 min readMay 12, 2020

You may have run into this issue like I have when trying to deploy your app to Heroku. You followed the safety convention of hiding your ~precious~ access tokens and keys properly with your .gitignore and .env files to push your repo up. Maybe you’ve even used the handy dandy npm dotenv. You double checked the root directory just to make sure none of those files ever get uploaded. Yet when you try to access your deployed project on your live site, none of those precious API calls gets rendered!

Fear not! You’ve done everything right so far. It’s more than likely an issue with your config vars. When deploying an app to Heroku, be sure to update the config vars. Go to your app’s dashboard, then settings tab. Scroll down to “Config Vars” and add every key-value pair of those precious access tokens and keys. Hide those config vars once again and refresh your live site. Voila! Your app should be rendering the data as does on your local machine.

Maybe you knew this, maybe you didn’t and found that it wasn’t actually your code that needed to be debugged. Hopefully this was helpful to some. Please enjoy this attempt at meme-ing.

Happy coding!

--

--

Vannida Lim
Webtips
Writer for

//Flatiron School Alum && Software Engineer ⚛👩🏻‍💻