# 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](https://hashnode.com/series/lets-build-a-mysql-nodejs-crud-app-ckhzrl98g022j99s11xymfqkn)! 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](https://lo-victoria.com/build-a-mysql-nodejs-crud-app-3-the-client-side-with-react). 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](https://devcenter.heroku.com/articles/heroku-cli) and follow their download instructions. Next, create Heroku account [here](https://signup.heroku.com/). 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](https://devcenter.heroku.com/articles/procfile). ## 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 ``` 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://:@/?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= ``` ``` heroku config:set DB_PASSWORD= ``` ``` heroku config:set DB_HOST= ``` ``` heroku config:set DB= ``` ## 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 `` value from the CLEARDB_DATABASE_URL as **Host**. And use the `` value as **Username**. ![sql1.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607067883406/gxMd8-UD7.png) 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://:@/?reconnect=true ``` Next, click **'Store in vault'** to enter the password which is the ClearDB ``. ![sql2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607067873425/9cOPaXoWo.png) After that, click **'Test Connection'** at the bottom of the window. You should see a pop-up saying connection is successful. ![sql3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607067860147/kJOIzbOK6.png) You can then click OK to finish setting up the new connection and it should appear on our Workbench homepage as shown below. ![sql4.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607068073618/Nlkwy-dPp.png) Click on the ClearDB connection and you should see by default, our schema name is the ClearDB ``. ![sql5.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607068697762/9fNDiGf25.png) Finally, let's create the book_reviews table just like the one we did for our `localhost` database. ![sql6.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1607068805567/9mWrJT1L9.png) ## 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 https://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](https://cdn.hashnode.com/res/hashnode/image/upload/v1607069539482/mkJEteUz2.gif) ## Thanks for reading! And that's a wrap for [Let's Build a MySQL Node.js CRUD App series](https://hashnode.com/series/lets-build-a-mysql-nodejs-crud-app-ckhzrl98g022j99s11xymfqkn)! 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](https://github.com/victoria-lo/raven-books) and check out the app [here](https://ravenbooks.herokuapp.com/) but please don't post any weird stuff. Thanks for reading! Cheers!