Index.js not rendering in browser

Project: Fullstack dockerized project. Backend with Express and frontend with Vite and React. Front and back-end in same project.

Backend code:

require("dotenv").config();

const express = require("express");
const mysql = require("mysql");
const bodyParser = require("body-parser");
const path = require("path")


const cors = require("cors");

const app = express();

const PORT = process.env.PORT || 3001;

app.use(cors({origin : 'https://qquestlabs.nl/'}));
app.use(bodyParser.json());

const db = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});
app.use(express.static(path.join(__dirname, 'frontend', 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend', 'dist', 'index.html'));
});

db.connect((err) => {
  if (err) {
    throw err;
  }
  console.log("MySQL Connected...");
});

app.post("/api/submit", (req, res) => {
  const { name, email, phoneNumber, dateOfEntry } = req.body;
  const query =
    "INSERT INTO DeelnemerGegevens (Naam, Email, Telefoonnummer, Invuldatum) VALUES ( ?, ?, ?, CURDATE())";
  db.query(query, [name, email, phoneNumber, dateOfEntry], (err, result) => {
    if (err) {
      return res.status(500).send(err);
    }
    res.status(200).send("Data inserted");
  });
});

app.get('api/health', (req, res) => {
  res.send('ok')
})

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Front-end vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins: [react()],
  // build: {
  //   minify: false,
  // },
  base: "./",
  preview: {
    port: 5173,
    strictPort: true,
  },
  server: {
    port: 5173,
    strictPort: true,
    host: true,
  },
});

Dockerfile:

FROM node:20.11-alpine AS frontend

WORKDIR /app/frontend

# Copy package.json and package-lock.json to install dependencies for the frontend
COPY frontend/package*.json ./

# Use a cache for npm modules to speed up builds
RUN --mount=type=cache,target=/root/.npm 
    npm ci

# Copy the rest of the frontend application code
COPY frontend .

# Build the frontend (this outputs the built static files to a 'dist' or similar directory)
RUN npm run build

# Stage 2: Run the backend and serve the frontend using Node.js
FROM node:20.11-alpine

WORKDIR /app

# Copy package.json and package-lock.json for backend dependencies
COPY package*.json ./

# Use a cache for npm modules to speed up builds
RUN --mount=type=cache,target=/root/.npm 
    npm ci

# Copy the backend server code
COPY . .

# COPY ./.env ./

# Copy the built frontend files from the first stage into the correct directory in the backend
COPY --from=frontend /app/frontend/dist ./frontend/dist

# Expose the backend port (adjust this if your server uses a different port)
EXPOSE 3001

# Run the server using server.js
CMD ["npm", "run" , "start"]

Nginx config for this project:

location /project-guus/ {
    proxy_pass http://project-guus-prod/;
    add_header Access-Control-Allow-Origin *;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Connection $connection_upgrade;
}

Issue:

When i run the docker container in localhost everything works well. When i push the project in my DigitalOcean droplet and proxy it with Nginx container then the index.js that is being created seems not to load properly and i dont see any content. The index.css in the same file render properly.

What i have tried:

I have changed the content of the gerenated index.js to a single console.log and this shows properly. I see further not errors or issues in the network tab