3.6.1: Heroku Deploy

Search…
Introduction
Heroku works by tying your repo to it's deployment system. You git push your repo to the Heroku remote and Heroku runs a set of predetermined scripts so that your app is up and running. You can see their detailed docs here.​
Heroku and GitHub are not linked by default. If we want to push our code to GitHub, we need run a separate push command from the command to deploy our code to Heroku.
Install Heroku Command Line Tools
Follow install instructions here: https://devcenter.heroku.com/articles/heroku-cli#install-with-an-installer
For Windows users, please run the command under Install with Ubuntu / Debian apt-get instead of the Windows installer as WSL uses Ubuntu
Login to the service through the command line:
heroku login
We're going to deploy an example app to demonstrate Heroku.
Example App Repo Setup
The following setup is only for the example repo in this module. There is no need to remove or add remotes for our project repos.
1.Clone the example app starter code.
git clone https://github.com/rocketacademy/heroku-example.git
2.cd inside.
cd heroku-example
3.Create a new repo on your own GitHub account.
4.Remove the Rocket Academy origin URL from the local cloned repo.
git remote remove origin
5.Set the origin of the local cloned repo to your new GitHub repo. Note this is the HTTPS link with .git at the end.
git remote add origin <YOUR_GITHUB_REPO_URL>
6.Push the code to your new repo.
git push origin main
Configure Express for Heroku
We need to make a few changes to our Express app to make it work on Heroku. Before we make these changes, let's make sure our app works locally. The following assumes we've setup the example app as per above instructions.
npm install
npx nodemon index.js
Visit http://localhost:3004/bananas and verify our server works.
Port
We need to add the ability of Heroku to configure the port that Express.js is listening on. (We can't set it ourselves, and it's not 80 - our Express.js app will not be directly listening for incoming internet traffic. There is an internal Heroku server that is listening on port 80 and forwarding traffic to our Express.js server instance.
Heroku configures the port internally by using a PORT environment variable. Update index.js to read from process.env.PORT, and set port to 3004 only if PORT env var doesn't exist, e.g. on our local machines.
index.js
const PORT = process.env.PORT || 3004;
Start Script
Heroku needs to know what command to run to start the system. By default Heroku looks for a start script in package.json for Node.js apps. Add start to the scripts section of package.json.
package.json
 "scripts": {
    "start": "node index.js",
    "test": "node test.js"
  },
Commit these changes to your repo. Test them to make sure your app still runs locally.
Heroku
Now we'll associate the repo with Heroku (run this on your laptop):
heroku create
Check to see the new remote Heroku has created for you:
git remote -v
push the repo code to Heroku:
git push heroku main
This command will set off the Heroku scripts that activate and run your app. You'll see them running in the terminal.
The terminal output will tell you what the URL of your new app is.
Check the Heroku dashboard to see your app settings.​
Create React App (For Future Reference)
In Module 8.1 we learn about Create React App (CRA), a pre-packaged Node.js app with React pre-installed. CRA deployment works slightly differently from regular Heroku development in 3.8.1: Heroku Deploy. If you're reading this page to deploy a CRA app, please follow the Heroku Deployment instructions in CRA Docs here to deploy CRA apps.
Note: You may need to replace master branch with main branch in the documentation code if your repo uses main as the default branch.
3.6: Heroku
3.6.2: Heroku Postgres
Last modified 5mo ago
Copy link
On this page
Introduction
Install Heroku Command Line Tools
Example App Repo Setup
Configure Express for Heroku
Port
Start Script
Heroku
Create React App (For Future Reference)