1

Tengo el siguiente código en node.js con express:

const express = require('express');
const app = express();
const path = require('path');

app.set('views', path.join(__dirname, 'views'));

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile('C:/EspacioDeTrabajo/creandoApp/src/views/home.html')
})

app.listen(3000);

Este código en HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>BIENVENIDO</title>
        <link rel="stylesheet" type="text/css" href="../public/css/styles.css">
    </head>
    <body>
        <h1 id="identified">HOME</h1>
        <h2>Accediste al home</h2>
    </body>
</html>

Y este código CSS:

body{
    border: 1px solid green;
    background: linear-gradient(to right, #348AC7, #7474BF)
}
#identified{
    background: crimson;
}

La app corre, puedo acceder al home, pero no me muestra los estilos css. Cuando abro el archivo 'home.html' directamente desde su carpeta me carga los estilos, pero en el navegador no aparece nada. ¿Cuál es el problema? Me harían un gran favor si me brindan una solución.

6
  • 2
    Parece un error en la ruta que apunta a tu carpeta pública. Si en Express le indicas que los archivos estáticos están en una carpeta, dicha carpeta será la raíz de cara al frontend. Por lo tanto el atributo href para tus estilos debe ser: href="/css/styles.css". Has la corrección en tu html y comenta los resultados. Saludos Commented el 25 nov. 2019 a las 18:23
  • 2
    Otra recomendación, no hagas un hardcode de la ruta a tu archivo html. Por lo tanto cambia esto: res.sendFile('C:/EspacioDeTrabajo/creandoApp/src/views/home.html') por esto otro: res.sendFile(path.join(__dirname, 'src/views/home.html')). De esta forma, si por casualidad mueves o cambias de nombre la carpeta del proyecto, el cambio será invisible para tu app. Saludos Commented el 25 nov. 2019 a las 18:28
  • Gracias Mauricio, ese era el problema, ahí cambié el contenido del href y a me carga los estilos css. ¡Muchas gracias por tu respuesta! Commented el 25 nov. 2019 a las 18:36
  • Mauricio Contreras, el sendFile lo hago desde un archivo appController, y su __dirname es "src/controllers". Mis archivos html están en la carpeta "src/public/views". ¿Cómo evito el hardcode desde controllers para acceder a views? Necesito un nivel mas abajo del __dirname, ¿Hay forma de manipularlo?, ¿o hay otra alternativa? Commented el 2 dic. 2019 a las 5:15
  • 1
    Hola, si la hay. Si en tu controlador al hacer console.log(__dirname); te muestra la ruta de tu controlador (src/controller/), entonces basta con indicar la ruta a tu html usando: path.join(__dirname, '../public/views/home.html');. De esta forma le indicas que el archivo está en un nivel anterior al que muestra __dirname. Saludos Commented el 2 dic. 2019 a las 5:52

1 respuesta 1

0

Estimado, no estoy muy seguro de si es la forma correcta de hacerlo, pero considerando lo simple de tu archivo css, podrías incluir los estilos con el tag . En tu caso:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>BIENVENIDO</title>
       <!-- <link rel="stylesheet" type="text/css" href="../public/css/styles.css"> -->
    </head>
    <body>
    <style>
body{
    border: 1px solid green;
    background: linear-gradient(to right, #348AC7, #7474BF)
}
#identified{
    background: crimson;
}
    </style>
        <h1 id="identified">HOME</h1>
        <h2>Accediste al home</h2>
    </body>
</html>
3
  • 3
    Aunque tu respuesta es correcta y es una posible solución, creo que la idea del OP es solventar este pequeño problema de cara a un proyecto más complejo. Saludos Commented el 25 nov. 2019 a las 18:30
  • Entiendo, pero como no especifica la complejidad, me pareciò conveniente una solución rápida. Commented el 25 nov. 2019 a las 18:37
  • 2
    Creo que podría ser una posible solución, pero el código insertado en mi pregunta es simple para que de forma rápida encuentren el error. En mi proyecto original donde practico es un poco más largo y por "buena práctica" me aconsejaron separar el html del css. Si el código se extendiera mucho más sería engorroso buscar cosas específicas, creo yo. Commented el 25 nov. 2019 a las 18:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.