Estoy intentando construir un servidor para mi proyecto actual, pero soy nuevo en Express. Mi directorio de archivos se ve así:
root-directory ├── public │ ├── css │ │ └── styles.css │ ├── images │ │ └── img1.png | | └── img2.png | | └── img3.png │ └── index.html | └── main.js └── server └── app.jsEste es el código que estoy usando en mi servidor:
const express = require('express'); const path = require('path'); const app = express(); app.use('/static', express.static('public')); app.use(express.json()); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../public/index.html')) }); const port = 5000; app.listen(port, () => console.log(`Server is listening on port ${port}.`)) Actualmente, el servidor solo muestra mi archivo HTML estático y ninguno de los JavaScript o CSS que están vinculados a él. He intentado alterar mi función sendFile para que se vea así: res.sendFile(path.join(__dirname, '../public')) ; pero eso da como resultado un Error: Cannot GET / .
¿Cómo puedo reconfigurar mi servidor para mostrar mi HTML, CSS y JavaScript a la vez?
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../public/index.html')) }); No necesita responder a todas las solicitudes GET (debido al uso de '*') con el archivo index.html . Además, entra en conflicto con la línea app.use('/static', express.static('public')); .
/static en esta línea con / app.use('/static', express.static('public')); Luego, su aplicación encontrará index.html en la carpeta public para responder a la solicitud GET '/'.
index.html si el enlace a los archivos CSS/JS/image es válido. Por ejemplo, el enlace al archivo style.css debería ser: <link rel="stylesheet" href="/css/style.css"> .