Deploy Build-Only React Apps to Heroku
Tags: react, heroku, node, devops
Published: 2020-02-06 17:10:26

Today I had to deploy a React application to Heroku. I tried several methods and one of them required that I deployed the entire codebase since Heroku would need the package.json (for a successful build) which is usually not included after running <code>npm run build</code> on a React application created using <a href='https://reactjs.org/docs/create-a-new-react-app.html'>CRA.</a>

By using a simple nodejs app, I was able to serve the react (build-only) app and afterwards, I deployed to Heroku.
The result: Faster deployment, and only React production app is found in production.

<h2><u>Here is how I did it</u></h2>

<strong>Note</strong>: This article applies in the case where you want to deploy build-only react apps to Heroku. Hence, it is assumed that you have a react app and an account on heroku.

Run <code>npm run build</code> on your CRA app to get a shiny build folder containing the production application.

Create a new folder (or project) and initialize it with npm.
<pre>npm init -y                                                     <em>CLI</em>
</pre>

Next, Copy the build folder into the new folder (created above).

Now, we need to create our node server to serve the build files. We will do this by creating a file named <strong>app.js</strong> and include the following code block:

<pre>
const express = require('express')
const path = require('path');

const app = express()
const port = process.env.PORT || 3000 // Heroku will need the PORT environment variable

app.use(express.static(path.join(__dirname, 'build')));

app.listen(port, () => console.log(`App is live on port ${port}!`))
</pre>

<em>Update: i)Don't forget to install express using <code>npm i --save express</code>
ii) Also add the start script to package.json <code>"start":"node app"</code> (credit: Riste)</em>

This is all we need to do to serve the app. Running <pre>node app</pre> in your terminal should start the app. You can view the result in your browser by navigating to http://localhost:3000.

<h2><u>Deploying to Heroku</u></h2>
The rest of the work will be done using the command line interface (terminal/bash/cmd), and in the root of your nodejs app.

First, we have to initialize our app with git
<pre>git init</pre>

Commit all files in the root directory by running commands in sequence
<pre>git add .</pre>
<em>Update: Don't forget to add <code>node_modules</code> to <code>.gitignore</code></em>
<pre>git commit -m "Initial commit"</pre>

Great job so far!

Now login to heroku (ensure that you have <a href='https://devcenter.heroku.com/articles/heroku-cli'>heroku cli</a> installed

<pre>heroku login</pre>

Once you are logged in, create a new project on heroku. I'll name mine <em>reactapp.</em> If that name is unavailable, use another name.

<pre>heroku create reactapp</pre>

By running the command above, a new remote is added to your git project. You can verify by running the command <code>git remote -v</code>.

We now have to deploy to the newly created heroku project

<pre>git push heroku master</pre>

If you don't get any errors, you app should now be hosted on heroku.
Enter the following command to view it in your browser <code>heroku open</code>.


PS: Check out <a href="https://github.com/mars/create-react-app-buildpack">create-react-app-buildpack</a> if you prefer to deploy using buildpack.

That's it fellas!

Follow me on [Twitter @Ileriayooo](https://twitter.com/Ileriayooo) for more on Tech and Opportunities.

If you want to be successful in tech, [here is a simple framework](https://twitter.com/Ileriayooo/status/1490416597596614660).