How to Deploy React.js + Node.js Express Client & Server App to Heroku Full Tutorial For Beginners

 

 

First of all you need to create two folders client and server

 

 

Inside the client folder you need to make the react.js app by executing the below command

 

 

npx create sampleapp

 

 

Where sampleapp is the name of the app

 

 

And after this you need to go to that folder

 

 

cd sampleapp

 

 

And after this you need to build this app

 

 

npm run build

 

 

This will build out the react.js app and create the build folder as shown below

 

 

 

 

 

And now you need to go to the server folder and create a node.js express app by executing the below commands

 

 

npm init -y

 

 

npm i express

 

 

And after that create a index.js file and copy paste the following code

 

 

index.js

 

 

 

 

And now in this code we are setting the public directory as the static one to serve files when user hit the request at the home route.

 

 

For this we need to create the public folder inside the root directory

 

 

And now we need to copy paste all the files which are present inside the build folder and copy paste it inside public folder of server

 

directory

 

 

 

 

 

And now make a .gitignore file and copy paste this line as shown below

 

 

 

 

 

And now execute the below commands to push this project to heroku

 

 

heroku login

 

 

heroku create sampleapp

 

 

git init

 

 

git add .

 

 

git commit -m "first commit"

 

 

git push heroku master

 

 

Leave a Reply