Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

EJS + CSS + JS externos

Olá pessoal, estou desenvolvendo uma página web com o node onde a view engine está sendo utilizada a "EJS".

Porém, ao criar as rotas e tentar renderizar a view, o css e js externos não estão sendo carregados. Alguém poderia me ajudar ?

Express.js

var express = require('express');
var consign = require('consign');
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var path = require('path');

module.exports = function()
{

    var app = express();

    app.set('view engine', 'ejs');
    app.set('views', './views');

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:true}));

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


    app.use(expressValidator());

    consign()
    .include('routes')
    .then('infra')
    .then('servico')
    .into(app);

    return app;
}

Produtos.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Página de teste Produtos</title>
    <link rel="stylesheet" type="text/css" href="/css/produtos.css">
</head>
<body>
    <h1>TESTANDO EJS</h1>

</body>
<script type="text/javascript" src="/js/alerta.js"></script>
</html>

Estrutura - root - public - css - js - views - produtos.ejs

E a rota está bem simlpes

module.exports = function(app){

    app.get('/produtos', function(req,res){

        res.render('./produtos');
    })
}
2 respostas
solução!

Opa, A pasta css ta dentro de public? Só para confirmar mesmo :). Confere no dev tools do navegador qual o erro que da em relação ao carregamento do css.. 404? Se for, acho que pode ter algum detalhezinho ali no código. Tenta usar essa classe como referência:

https://github.com/asouza/casadocodigo-javascript/blob/master/config/express.js

Agora funcionou !!!

Segui o exemplo que tu me deu ali e deu tudo certinho. Sim, a pasta css e js estavam dentro da public e no carregamento lá dentro do arquivo .ejs eu coloquei o caminho com a barra também, por exemplo:

<link rel="stylesheet" type="text/css" href="/css/produtos.css">

Na config do express ficou então:

module.exports = function()
{

    var app = express();

    app.use(express.static('./public'));
    app.set('view engine', 'ejs');
    app.set('views', './views');

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:true}));




    app.use(expressValidator());

    consign()
    .include('routes')
    .then('infra')
    .then('servico')
    .into(app);

    return app;
}

eu coloquei também agora o express.static acima do set view engine, não sei se isso pode também ter influenciado ou não. Mas enfim, agora está tudo ok !

Obrigado.