12.12.2024

Usando HTML em vez de Jade ou EJS no Express.js

Resposta Rápida

Quer começar rapidamente com o Express.js sem trocar de motor de template? Sirva arquivos HTML da pasta 'public' configurando o Express adequadamente. Aqui está um pequeno exemplo:

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

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

app.listen(3000, () => { 
  console.log('Servidor rodando com sucesso na porta 3000');
});

Basta colocar seus arquivos .html no diretório 'public', e o Express irá responder imediatamente às requisições HTTP.

Configuração de Rotas Específicas

Em algumas situações, você pode precisar especificar certas páginas para abrir em URLs específicas ou adicionar conteúdo dinâmico. Nesses casos, o método res.sendFile será particularmente útil:

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

Este código garante que, ao navegar até a página inicial (por exemplo, em http://localhost:3000/), index.html será exibido.

Tornando o HTML Dinâmico

Arquivos estáticos são bons, mas às vezes espera-se mais de um conteúdo dinâmico. Aqui, você pode encontrar ajuda com:

• AngularJS — um framework que torna HTML dinâmico.
• JavaScript que permite a interação com o DOM após o carregamento da página.
• Alpha consolidate e swig — bibliotecas para trabalhar com conteúdo dinâmico no servidor usando o Express.

const cons = require('consolidate');

app.engine('html', cons.swig);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

Aprimorando Templates com EJS

Quer adicionar mais funcionalidade aos seus arquivos .html? Use EJS:

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Com o JavaScript, o HTML ganha a capacidade de renderização do lado do servidor.

Visualização

Na galeria do Express.js, você pode encontrar obras-primas em HTML. A escolha de como exibi-las fica totalmente a seu critério:

🖼️ **Galeria**: [Início, Produtos, Contatos]

Não é necessário usar motores de template — suas criações estão prontas para exibição:

🔨 **Ligação (res.sendFile)**: Para exibir diretamente sua criação.

Assim, sua criação se torna o destaque da galeria:

🎨➡️🖼️: "Home.html" agora é a principal obra!

Com Express, não há limites para a estilização, permitindo que você libere todo o potencial do seu HTML.

Quando Usar um Motor de Template

Alguns casos em que motores de template podem ser úteis:

• Quando herança ou reutilização de templates é necessária.
• Quando você precisa passar variáveis do servidor para o HTML.
• Quando SEO é importante, e o JavaScript do lado do cliente não é suficiente.

Confiabilidade da Operação

Para garantir uma operação estável com arquivos HTML:

• Não configure 'html' como um motor de template para evitar encontrar o erro “Cannot find module 'html'”.
• Sirva arquivos de forma segura para prevenir tentativas de acesso não autorizado ao diretório.
• A definição adequada de tipos MIME é um passo obrigatório; caso contrário, os navegadores podem mal interpretar seus arquivos.

Recursos Úteis

1. Express 4.x - Referência da API
2. EJS — Templates JavaScript Embutidos
3. Introdução – Pug
4. GitHub - janl/mustache.js: Templating minimalista com {{mustaches}} em JavaScript
5. Introdução | Handlebars
6. Servindo arquivos estáticos no Express

Video

Navigation