Deploying a Full-Stack Web Application for Free on Heroku

Credits to: This dude on youtube for sharing how we can deploy our ReactJS Front-End, ExpressJS and MySQL Back-End online in a single video.

Deploying Front-End React Application

First off, create a new Repository in Github. Afterwards, go to your VS code integrated terminal and input in the commands below:

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{username}/{respository name}.git
git push -u origin main

Next, go to Netlify where we will be using it to host our Front-End Application

Register/Sign in with your Github account.

Afterwards, you should be able to see something like this

Click on the New site from Git button, and select Github for continuous deployment.

Once you have selected and authenticated, you will be presented with all the repositories that you have on Github.

Select the repository that you have created above.

After picking a repository, you should have the configurations below:

Afterwards, all you have to do is to click Deploy Site and the site will be deployed.

Deploying Back-End Express Server

We will be using Heroku to host our Express Server as well as our MySQL Database

Step 01: Create/Sign in to Heroku

Select the New button on the Top-Right corner > Create a new app

Fill in the project name as well as select the region for the project to be hosted at.

Once done, select Create App

Your project has been created and you can now use the commands Heroku provided to commit and push your server onto Heroku.

Download and install the Heroku CLI.

If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key.

$ heroku login

Create a new Git repository

Initialize a git repository in a new or existing directory

$ cd {project directory}/
$ git init
$ heroku git:remote -a {project name}

Deploy your application

Commit your code to the repository and deploy it to Heroku using Git.

$ git add .
$ git commit -am "make it better"
$ git push heroku master

Amendments to code before Heroku can run properly

• Inside package.json; add in this line under the scripts section:

  • "start" : "node server.js"

• Next, update all "localhost" URLs with the new Heroku project URL.

• add process.env.PORT in your server.js file so that Heroku can assign a port for the server to listen to.

Setting up MySQL Database for the server

On the Heroku project dashboard, navigate to the Resources tab.

Search for ClearDB MySQL in the search box.

The add-on is free of charge, however, Heroku will prompt you to key in your credit card information.

Once completed, we can now navigate to the settings menu to obtain the necessary configuration API keys to connect to our database.

Inside the settings tab, you should see a button: "Reveal Config Vars"

Click on the button to reveal an API Key.

Copy and paste the entire line of the key into your VS Code.

This is how to interpret and breakdown the API Key:

mysql://{username}:{password}@{hostname}/{database name}?

Copy and paste the segments of the API key into your databaseConfig.js.

let conn = mysql.createConnection({
            host: "us-cdbr-east-04.cleardb.com",
            user: "be73e2cda2a6bb",
            password: "b9343761",
            database: "heroku_a462107d2271bb1"
        });

That is all for the code segment.

Next, we will be using MySQL Workbench to Create and Edit our tables in the database.

After downloading the application, Click on the "+" button to the right of MySQL Connections.

A pop-up window will prompt you to set up the connection.

You can specify any connection name that you want.

Copy and paste the Hostname, Username, Password from above.

The default schema can be left un-filled

Afterwards, all you have to do is to select 'OK' and you can start editing your Schemas!

Have fun and i hope you learn something :D