CRUD NodeJS - #03 JS and CSS

Nesse vídeo realizaremos a instalação do nosso CSS para estilização do projeto e a instalação do javascript no frontend.

Instalando o CSS e o JS no Crud com Node

Vamos criar primeiramente na raiz do nosso projeto uma pasta css com o arquivo style.css e uma pasta js com o arquivo javascript.js.

Criados os arquivos, nós podemos setar o caminho desse arquivo de duas maneiras: criando rotas ou utilizando o recurso use do express. Vamos demonstrar as duas formas.

Setar arquivos estáticos com use
Para setar arquivos externos usando o use, podemos fazer assim:

app.use('/css',express.static('css'));
app.use('/js',express.static('js'));
app.use('/img',express.static('img'));

Setar arquivos estáticos através de rotas

Da mesma maneira que vimos na última aula sobre rotas, podemos setar os arquivos externos e imagens criando rotas pra cada um deles, dessa forma:

app.get("/javascript",function(req,res){
   res.sendFile(__dirname+'/js/javascript.js');
});
app.get("/style",function(req,res){
    res.sendFile(__dirname+'/css/style.css');
});

Nessa aula então vimos como linkar nossos arquivos externos CSS e nosso javascript no lado cliente.

Por hoje é só, sucesso nos códigos e na vida!