There are different ways to connect react frontend and NodeJS backend. In this blog, I am going to tell you three ways how you can connect backend and frontend. These are the ways most developers prefer. Prerequisites Basic knowledge of React and NodeJS Let's Get Started 1. Single server The first way is having a single server that serves both Node API and React SPA under the same domain. Here data is still exchanged through JSON. As you can see in the above picture, all the routes which do not start with will be handled by React SPA. /api This is a simple way and you don't need to worry about those errors🥶. CORS Here's how you can do it: Copy folder files from react app and paste them in folder of NodeJS server. build public Now serve the static which is in the folder index.html public app.use(express.static(path.join('public')));
app.use((req,res) => {
   res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
}); Pros Single server. No more CORS errors 😅 Ideal for small applications. Cons As both frontend and backend will be handled by the same server, you may face performance issues. 2. Two Separate Servers Here we need two separate servers. One server serve static React SPA and another server serve Node API. Data will be exchanged through JSON. Pros As we use two different servers for backend and frontend, we get better performance. Ideal for bigger applications. Cons Having to maintain two different servers. 3. Template engines The third way and the least preferred way is server-side rendering with template engines like , , etc... Here we don't create any REST API. ejs handlebars pugjs We render different HTML pages for different HTTP requests and use react to pre-render some parts of the page. This is not the preferred way to connect React and Node because we don't get the power of reactive user experience. Hope this helps you! Save for reference. You can follow me on where I share random useful stuff. Twitter First published here

Mozilla

Twitter

How to Get Your Personal Website to the Next Level 

Basic Web Design Principles to make Your Websites Pop

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

Make resilience your competitive advantage

3 Most Common Ways to Connect your Node and React Applications

3 Most Common Ways to Connect your Node and React Applications

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

All Types of POST Requests With API Tester

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

369 Stories To Learn About Database

All Types of POST Requests With API Tester

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

369 Stories To Learn About Database

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps