Build a MySQL Node.js CRUD App #4: Deploying to Heroku (Finale)

Hello and welcome to the finale of Let's Build a MySQL Node.js CRUD App series! In the previous article, we have implemented our front-end with React and completed our full stack app.

If you haven't read the previous article, please find it here.

Let's wrap up this series by deploying our React MySQL app to Heroku. Heroku is a cloud platform (PaaS) that we can use to host our app for free.

Step 1: Install Heroku CLI

If you haven't already, download and install Heroku CLI into your device. Click this link and follow their download instructions.

Next, create Heroku account here. Sign up for the free tier (or any) to get started.

Step 2: Package.json

Now let's make the necessary changes to our app to prepare for Heroku deployment.

Go to our package.json file. Under the scripts property, change the default start script to:

"start": "node server.js",

Then add the Node version of the app as:

"engines": {
    "node": "12.14.1"
  },

Step 3: Procfile

In the root directory of the project, create a new file named Procfile and add this line in it:

web:node server.js

A Procfile specifies what commands the app must execute on startup. To learn more, read Heroku's official documentation here.

Step 4: Server.js

Because we are going to deploy a full-stack app, we must enable our Express server in server.js to serve static files from our React app.

To do so, first import a built-in module called path at the top of server.js.

const path = require("path");

Then, add the lines below:

// declare react files in build as static
app.use(express.static(path.join(__dirname, "build")));

// serve index.html from the build folder
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

Now all we need to do is to create the build folder by running:

npm run build

A folder called build should appear in the root directory.

Step 5: Create Heroku app

Now we are ready to create a Heroku app. First, create a git repository for the project.

Then create the app by running:

heroku create <app-name>

Finally, deploy it to Heroku with:

git push heroku master

And now the app should be on Heroku, but it won't work yet because it is not connected to any MySQL database.

The one we have been using to test is only local. We need a service provider called ClearDB to help us connect to a MySQL database for our app.

Step 6: ClearDB Set Up

Install ClearDB add-on to our Heroku app with:

heroku addons:create cleardb:ignite

Note: ignite refers to the free version for ClearDB. Feel free to use other versions if you need to.

After installing ClearDB, a config variable called CLEARDB_DATABASE_URL will be automatically added to our Heroku app. To retrieve it from our command prompt, run:

heroku config | findstr CLEARDB_DATABASE_URL

Our command prompt will print the URL like so:

mysql://<user>:<password>@<host>/<database>?reconnect=true

Take note of the format because we will have to set our environment variables to our Heroku app like this:

heroku config:set DB_USER=<user>

heroku config:set DB_PASSWORD=<password>

heroku config:set DB_HOST=<host>

heroku config:set DB=<database>

Step 7: MySQL Workbench

We have setup our MySQL database connection with ClearDB but one thing's missing - the table. So let's create it like how we did for the localhost database.

Open MySQL Workbench and add a new database connection. Name the connection anything you want. Use the <host> value from the CLEARDB_DATABASE_URL as Host. And use the <user> value as Username.

If you forgot their values, you can always check your command prompt for the URL that was printed earlier. It will be in the format:

mysql://<user>:<password>@<host>/<database>?reconnect=true

Next, click 'Store in vault' to enter the password which is the ClearDB <password>.

After that, click 'Test Connection' at the bottom of the window. You should see a pop-up saying connection is successful.

You can then click OK to finish setting up the new connection and it should appear on our Workbench homepage as shown below.

Click on the ClearDB connection and you should see by default, our schema name is the ClearDB <database>.

Finally, let's create the book_reviews table just like the one we did for our localhost database.

Step 8: One more thing...

Hooray! We have deployed our React Express app to Heroku, we have successfully set up ClearDB and our MySQL database, what else?

Well, if you go to Heroku app website (in my case it is ravenbooks.herokuapp.com), you will notice that the client cannot request anything from the server. The console sends a 404 error because if you remember from the last article, the URL we use in our React app were all localhost:3000 instead of https://ravenbooks.herokuapp.com/.

To fix this error, change all URLs in App.js, Add.js and the other components from https:localhost:3000/reviews to https://ravenbooks.herokuapp.com/reviews.

And now our app should work perfectly!

ezgif.com-gif-maker.gif

Thanks for reading!

And that's a wrap for Let's Build a MySQL Node.js CRUD App series! If you have been following, thanks for reading this series till the end. I hope it is helpful in any way to help you get started with implementing MySQL into your React projects. Please like and share it around if it is.

To view the full code of this demo app, feel free to visit the repo and check out the app here but please don't post any weird stuff. Thanks for reading! Cheers!