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.
frontend
. Por lo tanto el atributohref
para tus estilos debe ser:href="/css/styles.css"
. Has la corrección en tuhtml
y comenta los resultados. Saludoshardcode
de la ruta a tu archivohtml
. 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. Saludosconsole.log(__dirname);
te muestra la ruta de tu controlador (src/controller/
), entonces basta con indicar la ruta a tuhtml
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