Bootcamp
Search…
3.6.1: Heroku Deploy
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:
1
heroku login
Copied!
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.1git clone https://github.com/rocketacademy/heroku-example.gitCopied!
- 2.
cdinside.1cd heroku-exampleCopied! - 3.Create a new repo on your own GitHub account.
- 4.Remove the Rocket Academy origin URL from the local cloned repo.1git remote remove originCopied!
- 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.1git remote add origin <YOUR_GITHUB_REPO_URL>Copied!
- 6.Push the code to your new repo.1git push origin mainCopied!
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.
1
npm install
2
npx nodemon index.js
Copied!
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
1
const PORT = process.env.PORT || 3004;
Copied!
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
1
"scripts": {
2
"start": "node index.js",
3
"test": "node test.js"
4
},
Copied!
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):
1
heroku create
Copied!
Check to see the new remote Heroku has created for you:
1
git remote -v
Copied!
push the repo code to Heroku:1
git push heroku main
Copied!
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.
.png?alt=media&token=28ddabbc-3fda-4a6f-9a40-431cc4dc2bfa)
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.Last modified 1mo ago