I am trying to create an application that hosts a live server, where anyone that connects with it will be able to see any changes made in real time. I am using vite and react.js and I have tried to get it to work for days now. I have used socket.io, express, cors and watched almost any and every youtube video I can find.

I have tried to make my server externally using a server.cjs file:

const express = require('express');
const app = express();
const http = require('http').Server(app);
const cors = require("cors");
const {Server} = require("socket.io")

// Serve static files from the 'src' directory (assuming Vite serves from here)
app.use(cors());

const io = new Server(http, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["Get", "POST"],
  },
})

app.get('/', function(req, res, next) {
  res.sendFile(__dirname + "/index.html");
});

io.on("connection", (socket) =>{
  console.log(socket.id)  
  socket.on("disconnect", ()=>{
    console.log("User disconnected", socket.id)
  })
})
const port = process.env.PORT || 3001;
http.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

When I attempted this I always got the message:
GET http://localhost:3001/src/main.jsx net::ERR_ABORTED 404 (Not Found)
I read somewhere that live servers cannot support .jsx files but when I changed it to a .js file I got the same message

I also tried running npm run build, when I tried to open with live server I got the message:
GET http://127.0.0.1:5500/assets/index-gc9qA2yo.js net::ERR_ABORTED 404 (Not Found)