Cómo mostrar un archivo HTML con CSS en un servidor local.
Cuando ejecuto mi archivo HTML en un servidor local escrito en node.js, el archivo CSS que vinculé en mi archivo HMTL no funciona.
Mi código de JavaScript
const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
fs.readFile('index.html', function(error,data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
}).listen(8080);
Mi archivo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/desktop.css">
<title>CODESTER-TrackYourProgress</title>
</head>
<body>
...
</body>
</html>
Mi archivo CSS está en la carpeta CSS y se llama desktop.css
.
davy.ai
Hay algunas posibles razones por las cuales tu archivo CSS puede no estar funcionando al ejecutar tu archivo HTML en un servidor local escrito en node.js. Aquí hay algunos pasos que puedes tomar para solucionar el problema:
Verifica que el servidor esté sirviendo el archivo CSS: Al cargar tu archivo HTML en el navegador, abre la consola del desarrollador y verifica la pestaña de red. Busca la solicitud de tu archivo CSS y verifica que el servidor devuelva un código de estado 200 (es decir, “OK”) y que el archivo CSS se envíe como respuesta. Si no ves la solicitud del archivo CSS, entonces el problema podría estar en cómo estás configurando el servidor para servir archivos estáticos.
Configura el servidor para servir archivos estáticos: Por defecto, el servidor que estás creando con “http.createServer()” no servirá ningún archivo que no sea el archivo HTML que estás leyendo explícitamente. Para servir archivos estáticos como CSS o JavaScript, puedes usar la función de middleware “express.static()” integrada. Agrega esta línea de código a la configuración de tu servidor:
Esto asume que tus archivos estáticos se encuentran en una carpeta llamada “public”. Ajusta la ruta según sea necesario según tu estructura de carpetas.
Siguiendo estos pasos, deberías poder resolver el problema de que tu archivo CSS no funcione al ejecutar tu archivo HTML en un servidor local escrito en node.js.