0

tengo una web app de nodejs y express en el backend, y en el frontend tengo una plantilla (html, css, js). Utilizo como motor de plantillas handlebars en el proyecto.

Tengo un problema con mis archivos estáticos. En rutas como las siguientes funcionan bien los archivos estáticos

localhost:3000/cursos
localhost:3000/cursos/crear

Pero dejan de cargar los archivos estáticos cuando se llega a una ruta como la siguiente:

localhost:3000/cursos/editar/id

server.js

En mi archivo del servidor tengo configurado los archivos estáticos y el motor de plantilla (handlebars) de la siguiente manera:

const express = require('express');                
const exphbs = require('express-handlebars');      
const path = require('path');

app.engine('.hbs', exphbs({
defaultLayout: 'main',
layoutsDir: path.join(app.get('views'), 'layouts'),
partialsDir: path.join(app.get('views'), 'partials'),
extname: '.hbs',
}));
app.set('view engine', '.hbs'); 


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

Entonces, no se a que se deba el problema :( Muchas gracias :)

1
  • Falta información para poder ayudarte. ¿Te da algún mensaje de error en la consola del navegador? ¿Cuál? Saludos Commented el 19 may. 2020 a las 5:22

1 respuesta 1

1

Tenía exactamente el mismo problema, el error radicaba en la manera en la que estaba cargando los archivos de la carpeta public (css, img, js, etc) en la plantilla de handlebars (archivos .hbs)

Incorrecto:

<link rel="stylesheet" href="./css/styles.css"> 
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="css/styles.css">

Correcto:

<link rel="stylesheet" href="/css/styles.css">

Al eliminar los ' ./ ' y ' ../ ' y reemplazarlos por ' / ' en las extensiones para buscar los archivos estáticos empezó a funcionar correctamente para todas las rutas.

IMPORTANTE:
No debes dejar la ruta sin el ' / ' inicial de lo contrario tampoco funciona.

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.