Ive created an express server and created an api and also ive installed react through vite for my frontend. when I try to connect or load my main html file to the server the console gives that error. Im new to express

Here's My express app code

const express = require("express");
const dotenv = require("dotenv");
const errorMiddleware = require("./middleware/error");
const cookieParser = require("cookie-parser");
const fileupload = require("express-fileupload");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
const path = require("path");
//config for  env file
dotenv.config({ path: `${__dirname}/config/config.env` });

app.use(cors());
app.use(express.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ limit: "50mb" }));
app.use(cookieParser());
app.use(fileupload());
// Route Imports
const productRoutes = require("./routes/productRoutes");
const userRoutes = require("./routes/userRoutes");
const orderRoutes = require("./routes/orderRoute");
const paymentRoute = require("./routes/paymentRoute");

//using all routes
app.use("/api/v1", productRoutes);
app.use("/api/v1/user", userRoutes);
app.use("/api/v1", orderRoutes);
app.use("/api/v1", paymentRoute);

app.use(express.static(path.join(__dirname, "../frontend")));
app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../frontend/index.html"));
});
//error HAndler Middleware
app.use(errorMiddleware);
module.exports = app;

CodePudding user response：

You can't serve your JSX files, you need to first build your front-end, so npm run build and then serve the content of your build folder ( in my case it's dist/ )

app.use(express.static(path.join(__dirname, "./front/dist/")));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "./front/dist/index.html"));
})