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.
- Create a React JS Front End Application
- Create a Node JS Application
- Modify the structure & package.json in both applications to prepare for deployment
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React, { Component } from 'react'; import './App.css'; class App extends React.Component { constructor() { super(); this.state = { message: ""} } componentDidMount() { this.receiveMessage(); } receiveMessage = () => { fetch('/messageservice') .then(res => res.json()) .then(message => this.setState({ message })); } render() { return ( <div className="App"> <div> <h1>Time in Server </h1> <div> {this.state.message} </div> </div> </div> ); } } export default App; |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const express = require('express'); const app = express(); const port = process.env.PORT || 5000; app.use(express.static(path.join(__dirname, 'reactjs/build'))); // Sample MessageService Get API // Implement a POST/GET API app.get('/messageservice', (req, res) => { res.json("Message from Node JS API: " + new Date().getTime()); }); app.get('*', (request, response) => { response.sendFile(path.join(__dirname+'/reactjs/build/index.html')); }); app.listen(port); console.log('MessageSerivce Running on ' + port); |
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.,
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "messageservice", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "express": "^4.17.1", "socket.io": "^2.3.0", "password-generator": "^2.1.0" }, "scripts": { "start": "node server.js", "heroku-postbuild": "cd client && npm install && npm run build" } } |
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…