Deploying a C-R-A Project with Heroku

I took the plunge into software development last year by attending a bootcamp at Codeop in full-stack development nearly at the start of the pandemic lockdown. Right at the end of the course, we had a lecture on deploying our work using Heroku. This is what I learnt from that session and also what I learnt subsequently when attempting to deploy different projects. I hope it can be useful to others who are starting out on their web dev journey.

Firstly, it is good to note, that before deploying to Heroku, it is good to test your build on your local port. If you’re using node and npm, then the commands to do this are as follows (unless you have named them differently in your package.json file). These are, however, the defaults provided when running create-react-app.

$npm run build

$npm start-dev

Also, you need to make sure that you have a .gitignore file and that it has the relevant files in them, notably, node modules, .env files and package-lock.json.

Once, and only once you have successfully run your build on your local port, you are ready to deploy to Heroku.

Install the Heroku CLI if you don’t already have it installed:

Link: https://devcenter.heroku.com/articles/heroku-cli#download-and-install

Login to Heroku on your terminal in VSCode:

$heroku login

N.B. The above step is necessary only the first time, then you’re already set up for all future deployments.

To create a new Heroku app type:

$heroku create (app-name)

But if you have already created an app on Heroku that you want to connect to an existing GitHub project, its easier to do:

$heroku git:remote -a app-name

Afterwards, check that your git is set up with a new Heroku remote by typing:

$git remote -v

This shows you all the remote URLs attached to your project.

Then you’re ready to do the following command, but if you have a database, then you need to set that up first:

$git push heroku master

Next, you have set up your backend, which will be MySQL in this case. Only after the backend is set-up do you do the above command.

I won’t cover adding MySQL to your Heroku app, but will post a link here when I find a good one.

After you have created the MySQL database on Heroku and created the environment variables (config variables) you are ready to migrate your db to Heroku. You do this by entering the Heroku terminal:

$heroku run bash

$npm run migrate

$exit

Now you’re ready to have a look at your deployed app. You can do this with the following command:

$heroku open

This command opens your Heroku-hosted app in a new tab of your browser.

If you have any problems with the build or any run-time errors, you can have a look at the logs with the following command:

$heroku logs

This will allow you to troubleshoot and see what has gone wrong with your app in order to fix it. For more information see:

https://devcenter.heroku.com/articles/logging#view-logs

And if you want to know more about how Heroku works under the hood have a start by reading about dynos:

https://www.heroku.com/dynos

Then follow this up by learning about procfiles:

https://devcenter.heroku.com/articles/procfile

These instructions are for use with a node project that has been bootstrapped using create-react-app. For a vanilla JS node project, there are really good instructions here:

John Crepezzi also taught us how to deploy to Heroku on Day 16 of his 16-day free Ruby-on-Rails bootcamp: AllAboardBootcamp. They are similar to the ones above, but not all of the instructions apply.

Erica is a recent full-stack bootcamp graduate with special interests in 3D, VR, XR, knitting, crafting and design.