es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mostrar un archivo HTML con CSS en un servidor local.

10 Jun, 2023 Programación

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.

Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    1. Verifica la ruta al archivo CSS: Asegúrate de que la ruta al archivo CSS en el archivo HTML sea correcta. En este caso, la ruta parece correcta: “href=”./css/desktop.css””. Sin embargo, verifica que la estructura de carpetas y el nombre de archivo coincidan exactamente.

    2. 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.

    3. 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:

    app.use(express.static('public'));

    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.

    1. Verifica que el archivo CSS se está vinculando correctamente: Verifica dos veces el link del archivo CSS en tu código HTML esté escrito correctamente. Asegúrate de que no haya errores de sintaxis ni errores tipográficos al declarar el link al archivo de hoja de estilo externa.

    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.

Comments are closed.