How to Deploy React, Node.js & Express Client/Server App to Heroku

In this tutorial, I will teach you how to deploy an app that is built using React, Node.js, and Express to Heroku.

Let’s get started by creating two folders “client” and “server” on your PC. For the sake of this tutorial, we will use these folders to separate our client and server-based code respectively.

Inside the client folder, create a new React.js app by executing the following command.

npx create sampleapp

npx create sampleapp

Here sampleapp is the name of the app that we are creating. Now, move inside that folder using the below command.

cd sampleapp

cd sampleapp

Now it’s time to build this app using the following code.

npm run build

npm run build

Basically, the above command will build out the React.js app and create the build folder as shown below.

Now go to the “server” folder and create a new Node.js and Express app by executing the below commands.

npm init -y

npm init -y

npm i express

npm i express

After that, create an index.js file and copy/paste the following code into it.

index.js

const express = require('express')

const path = require('path')

const app = express()

const PORT = process.env.PORT || 3000

app.use(express.static(path.join(__dirname + "public")))

app.listen(PORT)

const express = require('express')

​

const path = require('path')

​

const app = express()

​

const PORT = process.env.PORT || 3000

​

app.use(express.static(path.join(__dirname + "public")))

​

app.listen(PORT)

And now in this code, we are setting the public directory as the static one to serve files when the user hit the request at the home route. For this, we need to create the public folder inside the root directory.

Now copy all the files which are present inside the build folder and paste them inside public folder of the “server” directory.

Now make a .gitignore file and copy/paste the below line into it.

/node_modules

/node_modules

Finally, it’s time to push our code to Heroku. Go ahead by executing the below commands.

heroku login

heroku login

heroku create sampleapp

heroku create sampleapp

git init

git init

git add .

git add .

git commit -m "first commit"

git commit -m "first commit"

git push heroku master

git push heroku master