12.12.2024

Usando HTML no Express em vez de Jade: Um Guia

Resposta Rápida

Se você deseja usar HTML puro no Express em vez de Pug (anteriormente conhecido como Jade), a melhor recomendação é o EJS, que permite renderizar arquivos HTML.

npm install ejs

Adicione o seguinte código ao inicializar o Express:

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

// Diga ao Express para processar arquivos '.html' usando EJS
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

// Agora, vamos começar a criar um pouco de mágica em HTML! ♪┏(°.°)┛┗(°.°)┓♪
app.get('/', (req, res) => res.render('index'));

app.listen(3000);

Movimente seu arquivo index.html para a pasta views, e o Express o encontrará sem problemas, mesmo sem especificar a extensão .html em res.render().

Servindo Arquivos HTML Individuais no Express

Há momentos em que a simplicidade é a chave—tão simples que parece um jogo de criança com um bule ☕️. Para servir arquivos HTML individuais no Express sem usar mecanismos de template, você pode utilizar o método res.sendFile.

const path = require('path');

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views/index.html'));
});

Não se esqueça de definir o Content-Type corretamente e tratar possíveis erros ❤️:

const options = {
  dotfiles: 'ignore',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true,
    'Content-Type': 'text/html'
  }
};

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views/index.html'), options, (err) => {
    if (err) {
      console.log(err);
      res.status(err.status).end();
    }
  });
});

Criando Seu Próprio Mecanismo de Template

Se você adora fazer tudo por conta própria, pode criar seu próprio mecanismo de template usando app.engine e fs.readFile. Esta abordagem é mais simples que EJS ou outros mecanismos e exige menos esforço—como um cachorro trocando de pelo 🐕.

const fs = require('fs');

app.engine('html', (filePath, options, callback) => {
  fs.readFile(filePath, (err, content) => {
    if (err) return callback(err);
    // O mecanismo de template mais simples
    const rendered = content.toString().replace('#title#', options.title || '');
    return callback(null, rendered);
  });
});

app.set('view engine', 'html');
app.set('views', './views'); // Define a pasta para os templates

Não se esqueça de pensar em estratégias de cache, seja em memória ou opções mais avançadas, para melhorar a velocidade da sua aplicação.

Estratégias de Cache

O cache de visualizações se torna cada vez mais importante à medida que sua aplicação cresce. Em um ambiente de produção, você pode configurá-lo assim:

app.set('view cache', true);

Ao servir arquivos por meio de res.sendFile, a estratégia correta para cache no lado do cliente e no lado do servidor pode reduzir a carga no seu servidor. Um cache adequado pode tornar sua aplicação rápida, como um guepardo em busca de sua presa 🐆.

Visualização

Escolher entre Jade/Pug e HTML no Express é como escolher uma camisa do seu guarda-roupa:

Camisa Jade/Pug (👔):

• Elegante, mas exige cuidado, pois é sensível à indentação
• Não é para todo mundo

Camisa HTML Simples (👕):

• Simples e fácil de entender
• Adequada para qualquer ocasião
• Integra-se facilmente com várias tecnologias de frontend

Extensões de Arquivo Versáteis e Renderização

app.engine no Express abre possibilidades para personalizar o processamento de diferentes tipos de arquivo, dando a você a liberdade de escolher métodos de renderização:

app.engine('md', someMarkdownEngine());

Você pode usar essa abordagem para processar arquivos Markdown ou qualquer outro formato de arquivo de sua escolha.

Fique Atento às Versões do Express e Node.js

Para usar as melhores práticas e evitar métodos obsoletos, é recomendável consultar regularmente a documentação oficial do Express e a documentação do Node.js. O tempo não para, e isso se aplica ao Express também.

Recursos Úteis

1. Usando Mecanismos de Template no Express - Aprenda sobre a integração de HTML e Express.js através de vários mecanismos de template.
2. HTML: HyperText Markup Language | MDN - Tudo sobre HTML, desde os básicos até combinações complexas.
3. Como Incluir CSS Usando Node, Express e EJS? - Stack Overflow - Dicas da comunidade para incluir CSS em HTML em aplicações Express.
4. EJS - Embedded JavaScript Templates - Um guia completo para usar EJS, um mecanismo de template simples para gerar HTML com JavaScript.
5. Servindo Arquivos Estáticos no Express - O guia oficial para servir arquivos estáticos como HTML, CSS e JavaScript no Express.js.
6. GitHub - expressjs/serve-static: Servir Arquivos Estáticos - Detalhes sobre o uso do middleware serve-static para lidar com arquivos estáticos no Express.js podem ser encontrados no GitHub.

Video

Navigation