Estoy aprendiendo webdev y quiero intentar hacer un juego multijugador usando Express y socket.io

Puedo hacer un servidor con socket.io que escuche. Esa parte funciona bien.

Sin embargo, cuando trato de conectar un cliente, esto solo funciona si dejo que el servidor sirva el archivo HTML con lo siguiente:

Código del servidor:

 const express = require('express') const app = express() const http = require('http') const server = http.createServer(app) const { Server } = require('socket.io') const io = new Server(server) const port = 3000 io.on('connection', (sock) => { console.log('client connected') }) // This seems to be necessary, but I don't want it to be!!! app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html') }) server.listen(port, () => { console.log(`Server listening on port ${port}`) })

Este index.html tiene lo siguiente en la parte inferior:

 <script src="/socket.io/socket.io.js"></script> <script>const socket = io()</script>

Sin embargo, quiero mantener todo mi código frontend separado del servidor. Hice un repositorio separado para el frontend y el backend. Quiero que la interfaz contenga toda la lógica de la interfaz de usuario y use solo llamadas de datos (AJAX) para obtener datos Json del servidor. Así que quiero poner este archivo index.html solo en mi código de interfaz.

Sin embargo, si hago esto, la conexión no funciona.

Puedo iniciar el servidor bien. Abro index.html desde WebStorm que también crea un servidor para esto que configuré para escuchar también el puerto 3000

Sin embargo, no puede encontrar /socket.io/socket.io.js y aparece el siguiente error en la consola. Tampoco funciona si WebStorm se ejecuta en un puerto diferente.

 The resource from “http://localhost:3000/socket.io/socket.io.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

¿Cómo puedo mantener este html solo en el repositorio de mi cliente y seguir trabajando con socket.io, o no es posible?