ReactJS + Node JS in Heroku in Minutes

In this tutorial, we are going to deploy React JS(Front End) and Node JS(Back End) as a single application in Heroku Server.

Without deploying in individual servers, we will deploy both React JS & Node JS in a single server., so that API calls can be connected only from our front end to Back end.

Further Using CORS policy, simply we can avoid the usage of backend API services from unknown entities.

We are following the below steps one by one to deploy ReactJS+Node JS in Heroku Server.

  1. Create a React JS Front End Application
  2. Create a Node JS Application
  3. Modify the structure & package.json in both applications to prepare for deployment
  4. Using the heroku account commit & push (Deploy) the code base in Heroku

Create a React JS Front End Application

Please follow the below tutorial to create simple React JS application.,

Link:

Commands for creating React App Templates

  • Install Node JS
  • Use below command to create React JS template(boilerplate code)
  • npx create-react-app my-app

Replace the App.js with the below code to use the simple Node JS API.

Create Node JS Application

We will create a simple REST service using Node JS (GET) to get a message from server.

As already we have installed Node JS as part of creating React App.

Create a simple JS file., and using node command we can simply start the server.

server.js

In the above server.js, we are using express JS to load the static React JS files.

We could see app.get(‘*’,(request,response)) is used to send unidentified request url from webpage will be directed to index file of React JS Application.

Merging the React JS with the Node JS workspace, like the following structure.,

Node JS+React JS Structure
  • Create a folder reactjs in Node JS home directory.
  • Move the Entire React JS application along with package.json under the reactjs folder present in the node js workspace location.
  • The reactjs/build location is referred in the app.use() in server.js (Node JS backend) file.
  • When the app starts, it will load the client static file, and react js client files refer the node js internally.
  • Finally package.json present in Node JS should have the command for Node Js startup & also react js startup as shown below.

Finally, Upload the package once created to the Heroku server by creating a new app.

Commit all the changes to the app using “git commit”

git push heroku master

Finally when pushing the code using the above command in Heroku, default Heroku will deploy the Node JS and React JS changes in heroku server.

The Entire React JS+Node JS merged Source code is present in the below Github link to download and use…

https://github.com/TutorialFlow/ReactJSNodeJS

Leave a Comment

Your email address will not be published. Required fields are marked *