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.
- React and NodeJS
Let's get started
1. 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-
buildfolder files from react app and paste them in
publicfolder of NodeJS server.
- Now server the static
index.htmlwhich in the
- Single server.
- No more CORS errors 😅
- Ideal for small applications.
- As both frontend and backend will be handled by the same server, you may face performance issues.
2. 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.
- As we use two different servers for the backend and frontend, we get better performance.
- Ideal for bigger applications.
- Have to maintain two different servers.
3. Template engines
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
6 min read
All types of POST Requests with API Tester mobile app
Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.
9 min read
How to write tests in full-stack MERN web application
Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.