Last updated:
2 min read
Different ways to connect react frontend and node backend
Rakesh Potnuru
Author
0%
SHARE

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 the 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 to have 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
1app.use(express.static(path.join('public'))); 2app.use((req,res) => { 3 res.sendFile(path.resolve(__dirname, 'public', 'index.html')); 4});

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 serves static React SPA and another server serves Node API. Data will be exchanged through JSON.

Pros

  • As we use two different servers for the 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 react will 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 👇


I hope you learned something new!


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

How Feature Flags Can Help You Ship Faster and Smarter?

    8 min read

    sponsored

How Feature Flags Can Help You Ship Faster and Smarter?

Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.

Dockerizing Your MERN Stack App: A Step-by-Step Guide

    14 min read

Dockerizing Your MERN Stack App: A Step-by-Step Guide

Are you tired of spending hours messing with crontabs and installing packages in an attempt to run your app locally? Are you sick of always missing a dependency that doesn't allow you to run the app and therefore you have to debug it for hours trying to find what's wrong? Then you've come to the right place. In this article, you will learn how to make use of Docker to develop and ship your software faster and easier.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...