Heroku Deployment
Last updated
Last updated
Heroku is a hosting services platform, and offers free services to allow us to publish our final projects for free!
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:
It will open a browser with a button to login if you are already logged, if not you will have to write your credentials:
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.
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:
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:
To push your commits to Heroku and deploy a new version in the public URL
To check the deployed version in heroku, you can write:
or just put the complete URL in the browser: https://your-app-name.herokuapp.com
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.
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:
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.
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
<to be completed>
<to be completed>
There are a lot of options:
Buy the SSL with Heroku, which costs if 20$ per month.
Godaddy when I speak with them, they offer a discount, 55,27€ per one year or 118,27€ per two years.
Free SSL with Zerossl.com . They offer a free plan for three months and then you would have to reinstall it again (also free) every three months.
