DEV Community

Cover image for Different ways to connect react frontend and node backend
Rakesh Potnuru
Rakesh Potnuru

Posted on • Updated on • Originally published at blog.itsrakesh.co

Different ways to connect react frontend and node backend

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

  • 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 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 /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'));
});
Enter fullscreen mode Exit fullscreen mode

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 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

  • 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 the preferred way to connect React and Node because we don't get the power of reactive user experience.


So, what other ways do you know and what is your preferred way? Comment below 馃憞


鈿掞笍 Tool of the week 鈿掞笍

Web Maker

Web maker is a offline web playground which you can use in your browser. Simply open web maker once and bookmark it.


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

Discussion (9)

Collapse
santeee profile image
Santee

The 2nd 馃檶馃徑馃檶馃徑

Collapse
b00000001 profile image
b00000001

Nextjs has been handy for simplifying this process also, as a newbie.

Collapse
httpjunkie profile image
Eric Bishard

With Gatsby 4 there are some interesting options now as well!

Collapse
sinnick profile image
Fernando Mass贸

nextjs provides the ability to use both front-end and a backend api from the same project, so far my favorite option

Collapse
mohamedelsayed0149 profile image
Mohamed M El Sayed

The 2nd is the best

Collapse
benadavid profile image
David Benalal

In option 2, even if it's two different servers, you can point one to server1.com and the other to server1.com/api which solves the same CORS problem you mentionned in option 1, doesn't it?

Collapse
itsrakesh profile image
Rakesh Potnuru Author

You can have a subdomain pointing to different server but you can't have same domain for different servers.

Collapse
slidenerd profile image
slidenerd

would like to see a Vue and Node version of this article

Collapse
itsrakesh profile image
Rakesh Potnuru Author

I don't have experience with Vue, but I believe same concepts apply for that also.