React App Deployment — Heroku
Database Details & Hiding API Keys
Step 1 — Create GitHub Repositories
If your application is in one repository on GitHub, be sure to divide it into two individual repositories before starting your Heroku deployment process, one for the frontend and one for the backend.
My project’s frontend: React, Node
My projects’s backend: Ruby on Rails, PostgreSQL
Step 2 — Install Heroku
If you’ve never used Heroku in your terminal, install Heroku and login to your account.
Step 3 — Create Heroku App
3a — Create Heroku App on Site
Once you assign your application a name, follow the commands for linking your local project folder and GitHub commits to your newly-assigned Heroku application. This name will be included in the app’s URL.
Go to your terminal and assign it to a remote. Put your app’s name after the following line of code.
3b — Create Heroku App using CLI
If you decide to use the terminal to create your app, it will be assigned a random name. Use the command below to do so.
This will also assign your app to its remote.
Step 4 — Confirm Heroku Remote
Use $ git remote -v to check that both your GitHub and Heroku remotes are correctly assigned.
Step 5 — Deploy Code to GitHub and Heroku
I split this section into halves, not because backend and frontend deployment commands are different, but because there are backend database on the backend or frontend API key issues you may encounter.
5a — Backend Steps
Confirm that you have “changed directory” into your local backend folder. Check that your application’s version of Ruby is supported by Heroku. In my case, I had to update my root’s version using RVM (Ruby Version Manager) or manually from the .gemfile to meet minimum requirements by Heroku. After having my build fail during deployment, I scanned my .gemfile until I found my current version of Ruby. I updated it manually in the .gemfile, deleted my .gemfile-lock, and ran bundle install to update the Ruby gems.
Follow normal commands when resetting (drop and create) the database as well as re-seeding your data.
Note that normal Heroku does not support all Rake commands. Be sure to check which are supported. Rake’s reset is one that it not supported. If used, you will get the following error:
$ heroku rake db:reset
Follow the next steps to reset and seed your database:
$ heroku pg:reset DATABASE
$ heroku run rake db:migrate
$ heroku run rake db:seed
Push/deploy your code to GitHub and Heroku using normal staging commands.
$ git add .
$ git commit -m "your description"
$ git push origin master GitHub
$ git push heroku master Heroku
5b — Frontend Steps
The commands for deployment are the same as above. I will use this section to discuss how to hide your API key and reference is using a .env file.
- Run
npm install dotenvin your terminal to update thepackage.json.
2. Create a .env file at the root of your project folder, outside of your src folder.
3. In your new file, add a constant for your API key. The key MUST be prepended with REACT_APP to be recognized during compilation for all React applications. No need to put single or double quotes around the key.
REACT_APP_API_KEY=keyHere123
4. Create a .gitignore file at the root of your project folder.
5. Add your .env file to your .gitignore file.
.env
6. Assign your key to a constant in a .js file in your src folder. Do not forget proper string interpolation when assigning the process.env const. This is vital.
const API_KEY = `${process.env.REACT_APP_API_KEY}`
Key Takeaways:
- Check that your Ruby and Bundler versions meet minimum requirements for Heroku support.
- Install the following npm packages:
dotenv,heroku. - Once your keys are properly working, be sure to change your
http://localhost:3000references in your fetch statements to the heroku backend application link. - Some rake commands do not work in Heroku, i.e.
rake db:reset. - Proper string interpolation of
process.env.API_KEYis vital.
Sources:
