Heroku Deployment

What is Heroku?

Heroku is a hosting services platform, and offers free services to allow us to publish our final projects for free!

Heroku Deployment First steps

Register

First of all register an account in Heroku Website

Then install Heroku Command Line Interface (CLI), it makes it easy to create and manage Heroku apps directly from the terminal. It’s an essential part of using Heroku.

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

After install it, go to the terminal and write:

heroku login

It will open a browser with a button to login if you are already logged, if not you will have to write your credentials:

Deploy the project

In our project we will have to deploy 3 elements:

Front End Code
Back End Code
SQL Database

We will divide the Heroku project into 2 applications:

Front End Application
Back End Application

Create the 2 applications!

IMPORTANT: DO NOT USE A CREDIT CARD (IS NOT NEEDED) Create both applications in the “Personal” area, if you create a Team you will have to complete a form with your credit card, and later all the applications will have a monthly cost.

Front-end Application

Create an application for the front-end code, click in New button:

Write an available name, choose a good name because it will publish a unique URL to access to your project like: https://your-app-name.herokuapp.com

Choose Europe as the region:

Using your terminal go to the project directory and checkout the branch you want to deploy, normally master or main, then write:

heroku git:remote -a “your_app_name”

It will create a new remote repository, it means that from now you will have two, one for GitHub and a new one for heroku. From now when you push changes again you will have to specify where do you want to push:

To push your commits to Github.com:

git push origin master

To push your commits to Heroku and deploy a new version in the public URL

git push heroku master

To check the deployed version in heroku, you can write:

heroku open

or just put the complete URL in the browser: https://your-app-name.herokuapp.com

Back-end Application

You have to repeat the same process done in the front-end version.

The only difference is that the public URL that you will choose, you will not have to share it, because normally only you front-end application will access to this URL.

Database

Go to the back-end application in the Heroku platform, and in “Resources” tab, add the Postgres add-on:

Click in Provision button, then it will appear in the project:

If you click in “heroku Postgres” link you can access to the database information.

Go to Settings and View Credentials button:

Then you can see the connection information to access the database from your application and from DBeaver:

So now you can execute your scripts, as if you were working in your computer:

Environment variables

To Link the applications between them (the front-end send a request to the back-end) you will have to configure the new URLs and new ports (the URL will not be localhost and the port will not be 3000)

Also check that the deployed backend to connecting to the deployed Database using a public URL

Use secrets.js or ENV files to configure new addresses.

Heroku Extra features

Add a Custom Domain

Add a custom domain (www.yourdomain.com) to your application.

Follow the guide: Adding your custom domain to heroku app

But also you will have to make some changes in your domain provider webpage, if you are using GoDaddy follos this guide: Adding a GoDaddy domain to your heroku app