¿Por qué necesitamos una configuración de archivo de servidor express en el proyecto frontend si ya tenemos las API backend listas y el servidor backend listo?

tu no

Necesita un servidor HTTP para escuchar y responder a cualquier solicitud de Ajax que realice desde el código del lado del cliente.

Necesita un servidor HTTP para escuchar y responder a cualquier solicitud de documentos HTML y recursos estáticos (JS, CSS, imágenes, etc.) que necesitan sus páginas.

Estos pueden ser el mismo servidor HTTP, diferentes servidores HTTP, escritos con Express o no escritos con Express.

Los tutoriales de React tienden a ignorar mencionar esto y simplemente se sumergen en mostrar cómo usar Express para todo. No leas demasiado en eso.

¿Necesitamos un servidor express si hacemos que la interfaz reaccione y llame a las API para obtener los datos para la aplicación?

No. Ver arriba.

¿No son iguales el servidor backend y el servidor express en el proyecto frontend?

Quizás. Es tu decision. Véase más arriba.

No existe tal cosa como un "servidor backend" y un "servidor frontend", una aplicación web simple se compone de dos partes principales:

1/ una aplicación que sirve páginas html, que se ejecuta en un backend, por lo que generalmente se le llama servidor, pero hoy en día un servidor en la nube típico puede ejecutar cientos de aplicaciones de servicio diferentes al mismo tiempo

2/ una interfaz, que suele ser una pieza compleja de software JavaScript y páginas html que se envían dinámicamente al navegador del usuario y se ejecutan localmente

Lo mínimo que necesita para tener un sitio web que funcione es una aplicación de servidor que devolverá una o varias páginas html a petición del usuario. Un proyecto típico de React + Node se organiza de la siguiente manera:

• Un directorio del servidor: que contiene todo el código para la aplicación de servicio, la que devuelve las páginas web, también puede contener código que maneja la API REST, en caso de que su aplicación cliente requiera datos dinámicos o si su servidor se conecta a una base de datos. Tenga en cuenta que el servidor de la página web y el servidor API pueden ser dos aplicaciones diferentes, o más.

• Por lo general, no desea compartir con los usuarios su código de servidor, por lo que normalmente tiene un directorio público que contiene las páginas html y esta es la única ubicación en el disco, teóricamente, a la que pueden acceder los usuarios. Este directorio también puede contener imágenes y recursos necesarios para las páginas web, también se denomina recursos estáticos.

• Para mantener las cosas más organizadas, el código de la aplicación frontend se coloca en un directorio de cliente, pero en producción generalmente se incluye en uno o unos pocos archivos, según el tamaño de la aplicación, y también se coloca en el directorio público, por lo que contiene todo. necesarios para servir la aplicación.

Espero eso ayude

No necesitamos un servidor Express, sin embargo, agregarlo tiene grandes beneficios:

1. Ayuda a agregar compresión a una aplicación angular / reaccionar que usa solo un servidor en memoria (si ese es su caso).

2. Define la ruta base donde servir archivos estáticos para su proyecto y también puede agregar encabezados de compresión gzip para cada una de las solicitudes para que el servidor devuelva las versiones comprimidas.

3. Le ayuda a analizar sus llamadas a la API en el formato correcto esperado por la interfaz de usuario para que la lógica de análisis permanezca en el servidor express y no en la interfaz de usuario. Esto es útil en el caso de que la respuesta de la API cambie en el futuro, o cuando cambie el punto final del backend final, no es necesario modificar la interfaz de usuario, sino la ruta en el servidor express.

Descubrí estos y otros beneficios mientras buscaba cómo agregar compresión a una aplicación angular (resulta que no se puede sin Express o un servidor web real).