Different ways to connect react frontend and node backend

There are different ways to connect react backend and NodeJS frontend. In this blog, I am going to tell you three ways how you can connect backend and frontend. These are the ways most of the developers prefer.

Prerequisites

React and Node…


This content originally appeared on DEV Community and was authored by Rakesh Potnuru

There are different ways to connect react backend and NodeJS frontend. In this blog, I am going to tell you three ways how you can connect backend and frontend. These are the ways most of the developers prefer.

Prerequisites

  • React and NodeJS

Let's get started

1. Single server

Single server

The first way is having a single server that serves both Node API and React SPA under 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 /api will be handled by React SPA.
This is a simple way and you don't need to worry about those CORS errors🥶.
Here's how you can do it-

  • Copy build folder files from react app and paste them in public folder of NodeJS server.
  • Now server the static index.html which in the public folder 
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 separated servers

Two separated servers
Here we need two separate servers. One server servers static React SPA and another server serves 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

  • Have to maintain two different servers.

3. Template engines

The third way and the least preferred way is server-side rendering with template engines like ejs, handlebars, pugjs etc... Here we don't create any REST API.
We render different html pages for different http requests and use react to pre-render some parts of the page.
This is not preferred way to connect React and Node because we don't get the power of reactive user experience.

So, what other ways you know and what is your preferred way? Comment below 👇

Hope this helps you!
Save for reference.
Connect with me on Twitter and LinkedIn. Follow me for more 😃.


This content originally appeared on DEV Community and was authored by Rakesh Potnuru


Print Share Comment Cite Upload Translate Updates
APA

Rakesh Potnuru | Sciencx (2021-11-21T09:33:08+00:00) Different ways to connect react frontend and node backend. Retrieved from https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/

MLA
" » Different ways to connect react frontend and node backend." Rakesh Potnuru | Sciencx - Sunday November 21, 2021, https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/
HARVARD
Rakesh Potnuru | Sciencx Sunday November 21, 2021 » Different ways to connect react frontend and node backend., viewed ,<https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/>
VANCOUVER
Rakesh Potnuru | Sciencx - » Different ways to connect react frontend and node backend. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/
CHICAGO
" » Different ways to connect react frontend and node backend." Rakesh Potnuru | Sciencx - Accessed . https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/
IEEE
" » Different ways to connect react frontend and node backend." Rakesh Potnuru | Sciencx [Online]. Available: https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/. [Accessed: ]
rf:citation
» Different ways to connect react frontend and node backend | Rakesh Potnuru | Sciencx | https://www.scien.cx/2021/11/21/different-ways-to-connect-react-frontend-and-node-backend/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts