Solucionado
Gostaria de saber como incluir um framework front-end (boostrap, semanti-ui) para utilizar no projeto com Node JS. Estou com dificuldades quanto a importação dos arquivos nas views, os arquivos não são encontrados pela aplicação. Pesquisando e lendo, vi que é necessário criar um caminho estático para isso.
semelhante a
app.use(express.static(path.join(__dirname,'semantic')));Mas não me ficou muito claro... Como funcionaria?
Desde já agradeço
Jhonattan, tudo bem ?
O que você disse está certinho.
Como esses arquivos estão sendo incluidos no projeto de maneira estática, é necessário configurar o express para liberar o acesso a tais arquivos sem a necessidade de configuração de uma rota.
A função static disponível no módulo do express faz uso da lib serve- static para possibilitar a entrega de arquivos estáticos. Ela é integrada com o próprio express.
Olá Matheus! Muito Obrigado pela resposta, acredito que entendi.
No entanto, mesmo especificando a rota estática para a pasta onde se encontra meus arquivos css e js do front-end, ainda recebo net::ERR_ABORTED no carregamento dos mesmos.
No meu express.js está o seguinte
var express = require('express');
var load = require('express-load');
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','./app/views');
app.set('view options', {
layout: false
});
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(expressValidator());
app.use(express.static(path.join(__dirname,'public')));
app.use(express.static(path.join(__dirname,'semantic')));
load('routes',{cwd:'app'})
.then('infra')
.into(app);
return app;
}e na minha página
html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css">
<title>Cadastro de Épocas</title>
</head>
...Tem alguma idéia do que eu posso estar deixando passar?
Obrigado!
Olá, o problema provavelmente está na rota que você está utilizando para acessar o arquivo estático.
app.use(express.static(path.join(__dirname,'semantic')));Neste caso acima, acredito que o express vai disponibilizar todo o conteúdo que está dentro do diretório semantic na rota /.
Então você acessaria:
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">Dê uma olhada na página do Express: http://expressjs.com/pt-br/starter/static-files.html
Muito Obrigado Pedro!
Seguindo o link da documentação que você repassou consegui resolver o problema
usei:
app.use(express.static('semantic'));e importei como você mencionou
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">e funcionou!
Obrigado novamente Pedro! E agradeço também ao Matheus por sanarem minhas duvidas!