I’m facing an issue with my web application setup where I have separated my frontend and backend into different ports. The frontend is running on https://localhost:3000, and the backend is running on https://localhost:3001. I’m trying to implement server-side rendering (SSR) to serve the initial HTML from the backend, but I’m having trouble figuring out how to properly route requests from the frontend to the backend.

I’ve tried various approaches, including setting up a proxy in the frontend’s package.json and using express.static in the backend to serve the HTML file. However, when I navigate to https://localhost:3000, the HTML served is from the frontend’s public directory instead of the backend.

Here’s a simplified version of my current backend setup:

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/', (req, res) => {
  const filePath = path.resolve(__dirname, 'components/dealo/html', 'index.html');
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      return console.log(err);
    }

    data = data
      .replace(/__TITLE__/g, 'Dealo - Accueil')
      .replace(/__DESCRIPTION__/g, 'Dealo est une plateforme de petites annonces en ligne.');

    res.send(data);
  });
});

app.listen(3001, () => {
  console.log('Backend server is running on port 3001');
});

And here’s my frontend’s package.json with the proxy configuration:

{
  "name": "dealo",
  "version": "0.1.0",
  "homepage": "https://dealo.re",
  "private": true,
  "dependencies": {
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001",
}

I’m wondering if there’s a way to correctly route requests from the frontend to the backend so that the initial HTML is served from the backend when accessing the frontend URL. Any insights or suggestions would be greatly appreciated. Thanks in advance!

PS : backend and frontend are in separated folders

Project structure