How to Deploy React.js + Node.js Express Client & Server FullStack App to Heroku

Welcome folks today in this blog post we will be deploying react.js + node.js and express client and server full stack app to heroku. All the steps are shown below.

Get Started

In order to get started you need to make a new directory called fullstack as shown below

mkdir fullcrud

cd fullcrud

Now we need to make the frontend directory where we will be creating the react.js app as shown below

mkdir frontend

cd frontend

npx create-react-app sampleapp

cd sampleapp

And now you will see the below directory structure of the react.js app as shown below

Building the React.js App

Now guys the next step is to build the react.js app so that we can include it inside the node.js and express app as shown below

npm run build

This will create the build directory where it will hold the production ready code which you can deploy to live website as shown below

Making the Backend Express App

Now we will be making the express app inside the backend app

mkdir backend

cd backend

npm init -y

npm i express

Now you will see the below directory structure of the express app

Now you need to create the public directory where we will be storing the static html css and js files

index.js

const express = require("express")

const path = require("path")

const app = express()

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

const PORT = process.env.PORT || 5000

app.listen(PORT)

const express = require("express")

const path = require("path")

const app = express()

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

const PORT = process.env.PORT || 5000

app.listen(PORT)

Now we need to start the express app using the below command

nodemon index.js

And now we need to transfer the build folder contents to the public folder so that we can show the react.js app inside the express app as shown below

Now we need to add the start script inside the package.json file as shown below

package.json

Now if you open the localhost:5000 inside the browser you will see the react.js app inside the browser as shown below

Now we need to create the .gitignore file inside the root directory and add the following line of code

/node_modules

1	/node_modules

Deploying to Heroku

Now first of all download the heorku cli inside the computer and then inside the command line execute the below commands inside the root directory

heroku login

Now we will be creating the new heroku app by giving a new name to it as shown below