Why do we need an express server file setup in the frontend project if we already have backend APIs ready and backend server ready

You don't.

You need an HTTP server to listen for and respond to any Ajax requests you make from your client side code.

You need an HTTP server to listen for and respond to any requests for the HTML documents and static resources (JS, CSS, images, etc) that your pages need.

These can be the same HTTP server, different HTTP servers, written with Express or not written with Express.

React tutorials tend to ignore mentioning this and just dive in showing how to use Express for everything. Don't read too much into that.

Do we need an express server if we make the frontend on react and call the APIs to fetch the data for application.

No. See above.

Isn't the backend server and express server in the frontend project are same?

Maybe. It is up to you. See above.

There is no such thing as a "backend server" and a "frontend server", a simple web application is composed of two main parts:

1/ an application that serves html pages, which runs on a backend, so it is usually called a server, but a typical cloud server nowadays can run hundreds of different serving apps at the same time

2/ a frontend, which is typically a complex piece of JavaScript software and html pages that are dynamically send to the user browser and execute locally

The minimum that you require to have a working website is a server application that will return one or several html pages upon user request. A typical React + Node project is organized as follow:

• A server directory: which contains all the code for the serving app - the one returning the webpages, it can also contains code that handle the REST API, in case your client app requires dynamic data or if your server connect to a database. Note that the webpage server and the API server could be two different- or more - applications.

• You usually dont want to share to users your server code, so typically you have a public directory that contains the html pages and this is the only location on the disk - theoretically - that can be access by users. This directory can also contains required images and resources needed by the webpages, it is also called static resources

• To keep thing more organized, the code of the frontend application is placed in a client directory but on production is usually bundled in one or few files, depending on the size of the app, and also placed in the public directory, so it contains everything needed to serve the app.

Hope it helps

We don't need an Express server, however, adding it comes with great benefits:

1. It helps add compression to an angular / react application that uses only in-memory server (if that is your case).

2. Defines base path where to serve static files for your project and can also add gzip compression headers for each of the request so that the server returns the compressed versions.

3. Helps you parse your API calls to the correct format expected by the UI so that the parsing logic stays in the express server and not the UI. This is helpful in the event that the API response changes in the future, or when the final backend endpoint changes, no need to modify the UI, but the route in the express server.

I have found out these and other benefits while looking how to add compression to an angular application (turns out you cannot without express or an actual web server).