ReactJS is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It is widely used for making SPA(Single Page Application) and it has a large developer community.
NodeJS is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It’s used for traditional websites and back-end API services but was designed with real-time, push-based architectures in mind.
In this article, we will learn how to connect NodeJS as a backend with ReactJS as a frontend.
Prerequisites:
- Basic knowledge of React and Node.
- Node.js installed (version 12+).
- npm installed (version 6+).
Project Structure: This is the structure when all the modules and required files are ready.
Backend setup: Firstly we will work on our backend(NodeJS) portion. In your working folder make a file named app.js for NodeJS and package.json file to run all the modules we required.
Installing Module:
- Installing ExpressJS is a nodeJS framework:
npm install express
- Installing nodemon:
npm install nodemon
Configuration of package .json file: Add the start and dev script, which are important for running and dynamically running the code after changes made in your Node.js app respectively in package.json file as shown below.
HTML
{ "name": "demoapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js", "dev": "nodemon app.js" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1" } } |
Filename- app.js: Here is the simple JavaScript code that should be written in app.js which is for NodeJS.
Javascript
const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("Hello World!"); }); const PORT = process.env.PORT || 8080; app.listen(PORT, console.log(`Server started on port ${PORT}`)); |
Run the application using the following command:
npm run dev
Output:
- This will be a console output.
- Now go to http://localhost:8080/ in your browser, you will see the following output.
Filename- app.js: Now for connecting the React part we have to make some changes in the app.js of NodeJS. We have completed the backend part.
Javascript
const express = require("express"); const app = express(); app.post("/post", (req, res) => { console.log("Connected to React"); res.redirect("/"); }); const PORT = process.env.PORT || 8080; app.listen(PORT, console.log(`Server started on port ${PORT}`)); |
Frontend setup: First, we have to create React app and run your app by writing the below command.
npx create-react-app demo cd demo npm start
Output: Now go to http://localhost:3000/ in your browser, you will see the following output.
Connecting: We have completed both the frontend and backend parts, now we have to connect both. Now for connecting Reactjs with Nodejs we have added this line in package.json of react app folder:
"proxy": "http://localhost:8080
Filename- package.json: The package.json file is in your React app folder. This tells React to proxy API requests to the Node.js server built with Express in our project.
HTML
{ "name": "demo", "version": "0.1.0", "private": true, "proxy": "http://localhost:8080", "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } |
Filename- App.js: Made some changes in app.js of React to show that they are connected.
Javascript
import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>A simple React app.....</p> <a className="App-link" target="_blank" rel="noopener noreferrer" > Learn React </a> <form action="../../post" method="post" className="form"> <button type="submit">Connected?</button> </form> </header> </div> ); } export default App; |
Now run the Nodejs process npm run dev in one terminal and in another terminal start Reactjs using npm start simultaneously.
Output: We see react output we see a button “Connect” we have to click it. Now when we see the console server-side we see that the ReactJS is connected with NodeJS.
