Views com EJS | Notion

https://youtu.be/a8A2GfOuJh0?si=qojOQprw6BlhOdbf

A seguir, vamos expandir a arquitetura do projeto para incluir uma camada de estilos. Dessa forma, além das pastas de views para renderizar as páginas com EJS, adicionaremos uma pasta para arquivos estáticos – como CSS – permitindo estilizar suas páginas. Abaixo, veja como organizar e configurar essa estrutura.

1. Estrutura Atualizada do Projeto

A nova organização do projeto ficará assim:

.
├── config/
│   └── db.js
├── controllers/
│   └── usuarioController.js
├── models/
│   └── usuarioModel.js
├── routes/
│   └── usuarioRoutes.js
├── views/
│   └── index.ejs
├── public/
│   └── css/
│       └── styles.css
├── .env
├── .gitignore
└── server.js

config/, controllers/, models/ e routes/: continuam com as mesmas funções.
views/: contém os arquivos de visualização renderizados pelo EJS.
public/: pasta para arquivos estáticos (CSS, imagens, scripts, etc.). Aqui, criamos uma subpasta css/ para armazenar os estilos.
server.js: arquivo principal que inicializa o servidor, configura o EJS e define os arquivos estáticos.

2. Configurando o Express para Usar EJS e Arquivos Estáticos

No arquivo server.js, vamos configurar o EJS e indicar ao Express onde estão os arquivos estáticos (no nosso caso, dentro de public). Veja o exemplo:

const express = require('express');
const path = require('path');
const app = express();

// Configurando o EJS como template engine
app.set('view engine', 'ejs');
// Definindo a pasta de views
app.set('views', path.join(__dirname, 'views'));

// Configurando o diretório de arquivos estáticos (CSS, JS, imagens)
app.use(express.static(path.join(__dirname, 'public')));

// Middlewares para leitura de dados do corpo da requisição
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Rotas da API
const usuarioRoutes = require('./routes/usuarioRoutes');
app.use('/api', usuarioRoutes);

// Rota para renderizar a página inicial
app.get('/', (req, res) => {
  res.render('index', {
    title: 'Página Inicial',
    message: 'Bem-vindo ao aplicativo com EJS e CSS!'
  });
});

// Inicialização do servidor
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

A linha que utiliza express.static é responsável por servir arquivos estáticos. Assim, qualquer arquivo dentro da pasta public estará disponível para ser referenciado nas views.

3. Criando a View com EJS e Referenciando o CSS

Dentro da pasta views, crie ou edite o arquivo index.ejs para incluir uma referência ao arquivo CSS. Por exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <!-- Referência ao arquivo CSS localizado em public/css/styles.css -->
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <div class="container">
    <h1><%= message %></h1>
    <p>Esta página foi renderizada utilizando EJS e estilizada com CSS.</p>
  </div>
</body>
</html>

Note que usamos o caminho /css/styles.css, pois o middleware estático do Express já aponta para a pasta public.