Integrate React with Node.
js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Search…
Download Free
O'Reilly eBook
Successfully experiment
and integrate product
features in your so!ware
Integrate React with Node.js Express on same applications
Server/Port
Split So!ware
! Last modi!ed: December 4, 2020 (https://bezkoder.com/integrate-react-express-same-server-port/) "
bezkoder (https://bezkoder.com/author/bezkoder/) # Full Stack (https://bezkoder.com/category/full-
stack/), Node.js (https://bezkoder.com/category/node-js/), React (https://bezkoder.com/category/react/)
Open
In this tutorial, I will show you step by step to integrate React project with Node.js Express
Rest API so that we only need to run both on same Server/Port. You will also know how to
configure React SPA Routing to avoid 404 on refresh.
Related Posts:
– React + Node.js Express + MySQL: CRUD example (https://bezkoder.com/react-node-
express-mysql/)
– React + Node.js Express + PostgreSQL: CRUD example (https://bezkoder.com/react-
node-express-postgresql/)
– React + Node.js Express + MongoDB: CRUD example (https://bezkoder.com/react-node-
express-mongodb-mern-stack/)
– React + Node.js Express + MySQL/PostgreSQL: JWT Authentication example
(https://bezkoder.com/react-express-authentication-jwt/)
– React + Node.js Express + MongoDB: JWT Authentication example
(https://bezkoder.com/react-node-mongodb-auth/)
Serverless:
– React Firebase CRUD with Realtime Database (https://bezkoder.com/react-firebase-
crud/)
– React Firestore CRUD App example | Firebase Cloud Firestore
(https://bezkoder.com/react-firestore-crud/)
Contents [hide]
React & Node.js Express Application Overview
Technology Stack
Setup React Client
Setup Express Server More ▼
Ad forceofnatureclean.com
Integrate React with Node.js Express
Build React App
https://bezkoder.com/integrate-react-express-same-server-port/ Page 1 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Integrate React production into Node.js Project
Serve React App from Express
Run Express and React on same Port
React Router 404 Not found on Refresh
Conclusion
Further Reading
Source Code
React & Node.js Express Application Overview
Launch Your
Assume that we have 2 separated projects: React & Node.js Express like this-
Website
You'll need: A studio. A
second job. And an
online store. Launch it
with Squarespace.
Squarespace
Open
For example, if we run them separately:
Express Server exports Rest Apis at Url: http://localhost:8080/
React Client runs at url: http://localhost:8081/
Using React to call Express Rest API:
HA Proxy GUI
HA Proxy GUI and HA Proxy
Reporting
https://bezkoder.com/integrate-react-express-same-server-port/ Page 2 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Otherwise, when deploying React production-build with Node.js Express project, we only
need to run Node Project for the fullstack (React + Node) system.
In this example, we access http://localhost:8080/ .
Technology Stack
Node.js
Express
React 16
React Router
React Scripts 3
Setup React Client
https://bezkoder.com/integrate-react-express-same-server-port/ Page 3 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
You can use your own React Project, or just download the source code on Github
(https://github.com/bezkoder/react-crud-web-api), or follow these steps to create a new
one.
Open cmd and create a new React Project as following command:
npx create-react-app react-crud
After the process is done. We create additional folders and files like the following tree:
$ public
$ src
$ components
! add-tutorial.component.js
! tutorial.component.js
! tutorials-list.component.js
$ services
! tutorial.service.js
! App.css
! App.js
! index.js
! package.json
Because I want to keep this tutorial simple and brief, please continue to develop this App
with instruction in the post:
React.js CRUD example to consume Web API (https://bezkoder.com/react-crud-web-api/)
Setup Express Server
You can use your own Node.js Project, or just download the source code on Github (), or
follow these steps to create a new one.
First, we create a folder:
$ mkdir react-express-mysql
$ cd react-express-mysql
Next, we initialize the Node.js App with a package.json file:
https://bezkoder.com/integrate-react-express-same-server-port/ Page 4 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
npm init
name: (react-express)
version: (1.0.0)
description: integrate React and Node.js Express Rest Apis on same server
entry point: (index.js) server.js
test command:
git repository:
keywords: react, nodejs, express, sequelize, rest, api
author: bezkoder
license: (ISC)
Is this ok? (yes) yes
The instruction can be found in one of the posts:
– Node.js Rest APIs example with Express, Sequelize & MySQL
(https://bezkoder.com/node-js-express-sequelize-mysql/)
– Node.js Rest APIs example with Express, Sequelize & PostgreSQL
(https://bezkoder.com/node-express-sequelize-postgresql/)
– Node.js Rest APIs example with Express, Sequelize & MongoDb
(https://bezkoder.com/node-express-mongodb-crud-rest-api/)
Let’s continue to the most important part.
Integrate React with Node.js Express
Build React App
Currently React Client and Express server work independently on ports 8081 and 8080 .
The first thing we need to do is to build React App for production.
Run command:
– npm run build
– or yarn build
PS D:\Projects\ReactProjects\react-crud> npm run build
> [email protected] build D:\Projects\ReactProjects\react-crud
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Compiled successfully.
File sizes after gzip:
52.63 KB build\static\js\2.8091b331.chunk.js
22.44 KB build\static\css\2.47e06e2e.chunk.css
2.38 KB build\static\js\main.2cd554a3.chunk.js
774 B build\static\js\runtime-main.efee8004.js
144 B build\static\css\main.9c6cdb86.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
https://bezkoder.com/integrate-react-express-same-server-port/ Page 5 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Now you can see new build folder with content as following:
Integrate React production into Node.js Project
In app folder of Node.js Express Project, let’s create views folder.
$ app
$ config
$ controllers
$ models
$ routes
$ views
! index.js
! package.json
! server.js
Now we need to copy all files from React build folder to app/views folder above.
The final Node.js Project folder structure will be like this:
https://bezkoder.com/integrate-react-express-same-server-port/ Page 6 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Serve React App from Express
We’re gonna serve static files such as HTML files, CSS files and JavaScript files in
app/views folder using the express.static() built-in middleware function.
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
Now, we can load the files in the static directory:
http://localhost:8080/index.html
http://localhost:8080/static/css/2.47e06e2e.chunk.css
http://localhost:8080/static/js/2.8091b331.chunk.js
The final step is to deliver index.html file using res.sendFile() . We will need to pass in
a path to the file.
// const path = __dirname + '/app/views/';
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
https://bezkoder.com/integrate-react-express-same-server-port/ Page 7 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Now content in server.js file is like this-
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
var corsOptions = {
origin: "http://localhost:8081"
};
app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const db = require("./app/models");
db.sequelize.sync();
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
require("./app/routes/turorial.routes")(app);
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
Run Express and React on same Port
Run the Node.js Express server (including React client) with commands:
node server.js
Open browser with url: http://localhost:8080/ .
Now you can see the result:
https://bezkoder.com/integrate-react-express-same-server-port/ Page 8 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
React Router 404 Not found on Refresh
Oh yeah! Everything looks good.
But wait, let’s try to refresh the page.
What happened?
To handle this error, we’re gonna enable hash(#) in React App Routing by using
HashRouter (https://reactrouter.com/web/api/HashRouter) .
It will keep the UI route in hash part of the URL, which should not make the server return
404.
So, in React Project, let’s open index.js file and change BrowserRouter into
HashRouter .
import React from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
https://bezkoder.com/integrate-react-express-same-server-port/ Page 9 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Don’t forget to rebuild the React App and copy all files and folders in build directory (React
project) into views (Node.js Express project).
Now Our Url is hashed(#) after port number: http://localhost:8080/#/tutorials
Now you can refresh the page without worrying about 404.
Conclusion
Today we’ve learned how to integrate React with Node.js Express on same Server/Port. We
also handle the case React Router 404 Not found on Refresh by adding hash(#) to the urls.
There are many React + Express examples that you can apply this approach to integrate:
– React + Node.js Express + MySQL: CRUD example (https://bezkoder.com/react-node-
express-mysql/)
– React + Node.js Express + PostgreSQL: CRUD example (https://bezkoder.com/react-
node-express-postgresql/)
– React + Node.js Express + MongoDB: CRUD example (https://bezkoder.com/react-node-
express-mongodb-mern-stack/)
– React + Node.js Express + MySQL/PostgreSQL: JWT Authentication example
(https://bezkoder.com/react-express-authentication-jwt/)
– React + Node.js Express + MongoDB: JWT Authentication example
(https://bezkoder.com/react-node-mongodb-auth/)
Further Reading
https://www.npmjs.com/package/express
(https://www.npmjs.com/package/express)
React Component (https://reactjs.org/docs/react-component.html)
https://reactrouter.com/web/api/ (https://reactrouter.com/web/api/)
Source Code
You can find the complete source code for this tutorial at Github
(https://github.com/bezkoder/react-express-mysql).
https://bezkoder.com/integrate-react-express-same-server-port/ Page 10 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
Free Experimentation eBook
Ad Successfully experiment and
Ad integrate product features in your…
Split Software
Open
Share & Get Paid Node.js, Express Build Your App React.js +
& MongoDb: without Coding Node.js +
Build a CRUD… Express +…
Ad SurveyJunkie.com bezkoder.com Ad Appy Pie bezkoder.com
Cybercrime Login Page with React + Node.js React.js CRUD
Investigation React.js, + Express + example to
MongoDB:… PostgreSQL… consume Web…
Ad Boston University MET bezkoder.com bezkoder.com bezkoder.com
integration (https://bezkoder.com/tag/integration/) node.js (https://bezkoder.com/tag/node-js/)
react (https://bezkoder.com/tag/react/) rest api (https://bezkoder.com/tag/rest-api/)
Leave a Reply
Your email address will not be published. Required !elds are marked *
Comment
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
POST COMMENT
% Vue.js + Node.js + Express + MongoDB example: MEVN stack CRUD Application (https://bezkoder.com/vue-node-express-
https://bezkoder.com/integrate-react-express-same-server-port/ Page 11 of 12
Integrate React with Node.js Express on same Server/Port - BezKoder 3/5/21, 2:55 PM
mongodb-mevn-crud/)
Upload & resize multiple images in Node.js using Express, Multer, Sharp & (https://bezkoder.com/node-js-upload-resize-multiple-
images/)
FOLLOW US TOOLS
(https://www.dmca.com/Protection/Status.aspx?
" Json Formatter (https://bezkoder.com/json-formatter/) ID=3f543dd5-c6d8-4208-9a6b-
0e92057fd597&refurl=https://bezkoder.com/integrate-
(htt react-express-same-server-port/)
ps://
ww
w.yo
utub
e.co
m/c
han
! nel/ #
(htt UCp (htt
ps:// 0mx ps://
face 9RH gith
boo 0Jxa ub.c
k.co Fsm om/
m/b MvK bezk
ezko XA8 oder
der) 6Q) )
Home (https://bezkoder.com/) Privacy Policy (https://bezkoder.com/privacy-policy/) BezKoder 2019
Contact Us (https://bezkoder.com/contact-us/) About Us (https://bezkoder.com/about/)
https://bezkoder.com/integrate-react-express-same-server-port/ Page 12 of 12
