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








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








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