Deploy Your React/Node app to Heroku in 15 minutes or less. (3 steps)
If you’ve been developing your React web application locally, you have put in a lot of work getting it to bundle correctly! Now the time has come to deploy and make your beautiful code available to the world. When you go to deploy an app, Heroku is an obvious choice: It’s simple, user friendly, and it can be free if you’re using it for academic/for-fun purposes. But deploying a React application can sometimes be challenging. If you’re in this position, this step-by-step walk-thru will set you up right!
*Note: Short and sweet, this is a high level overview of what we’ll be doing:
- Create a free heroku account
- `npm install heroku -g` to install the cli globally
- `heroku create <app-name-here>`
- Provision a db on heroku (from the browser gui)
- Make sure you have your webpack and postinstall scripts right in your package.json
- `git push heroku master`
3 Main Steps
Structured, with a bit more detail, these are the three main steps we will be following to deploy your React App to Heroku.
- Create a heroku account (it’s free!) and install the CLI.
- Provision Database on Heroku and edit Package.json
- Push up to Heroku
Let us begin.
1. Create a Heroku account (it’s free!) and install the Heroku CLI
A. First, go to heroku.com and create an account. It’s free!
https://www.heroku.com/free (Holy Moses, “free” is in the url!)
B. Run in your local shell:
npm install heroku -gThis gives you the heroku cli (Command Line Interface), installed globally (not inside your app)
*Note: If you don’t have npm installed, you’ll need that. But if you’ve gotten to this point, it’s a fair bet that you already have it!
Then run:
heroku create <app-name-here>
2. Provision Database on Heroku and edit package.json file
A. Provision Database
From the Heroku dashboard, click your app, then the Resources tab. Search for Heroku PostgreSQL (this is my preferred, but there are others like Heroku Redis available), select it, and click Provision in the pop-up.
*Note: In your app, make sure to reference your PostgreSQL deployed DB URL process.env.DATABASE_URL conditionally (this DB URL is the same for all databases, not just PostgreSQL). Something like this:
const DB_URL = process.env.DATABASE_URL || 'postgres://localhost:5432/my_db'This is the same way we set up our server’s port conditionally for deployment or development:
const port = process.env.PORT || 8080B. package.json File
Make sure you have your webpack and postinstall scripts right in your package.json so that Heroku knows what to do with your code once it makes its way to Heroku!
// ... other package.json content ..."scripts": {
"postinstall": "npm run webpack",
"webpack": "webpack",
// ...other scripts...
}// ... other package.json content ...
You are now well on your way to developer nirvana.
3. Push up to Heroku
Finally, you’re ready to deploy!
A. OPTIONAL: Add Heroku as a remote
This is already done for you if you have created your app from the CLI (though it won’t “hurt” anything if you do this step, just unnecessary). If you used the online dashboard to create your app, you’ll have to run from your command line:
heroku git:remote -a <app-name-here>Note: This must match your heroku app name exactly. The -a is telling heroku which app to use.
B. Push to Heroku
Run from your local command line:
git push heroku masterThis will log out a number of things, and you will likely see an error in the logs about a mode not being set correctly, but webpack defaults to production, so don’t worry about it!
*Note: The above pushes your local master branch. If you want another branch (i.e. other-local-branchname) pushed to Heroku, you can run the following (OPTIONAL. Don’t run this if you want your master branch used as the deployed code!)
git push heroku <other-local-branchname>:masterThe most important thing logged by heroku is your successfully-deployed URL! Oh yes…
That’s it! Happy deploying!
