Servindo HTML

Sirva páginas web de verdade pelo seu server

⏱ Estim. ~10 min

01 · Ler

Até agora, seu server respondeu com texto puro e JSON. Mas quando você visita sites de verdade, o que aparece é uma página com estilos, com títulos, imagens e layout — não texto cru.

Isso acontece porque web servers de verdade servem arquivos HTML. HTML é a linguagem que os navegadores entendem e usam para mostrar conteúdo formatado e rico.

Em vez de escrever HTML dentro do código JavaScript (o que fica bagunçado rápido), a gente coloca os arquivos HTML em uma pasta especial e pede para o Express servir automaticamente. Isso se chama servir arquivos estáticos — arquivos que não mudam por requisição, são entregues como estão.

Pontos-chave

Arquivos estáticos são servidos direto, sem processamento
A pasta public/ é a convenção para arquivos publicamente acessíveis pelo navegador
O Express consegue servir uma pasta inteira de arquivos estáticos com uma linha de código
É como sites de verdade servem CSS, imagens e páginas HTML

02 · Prática real

Primeiro, crie um diretório public dentro da pasta do seu projeto. Seus arquivos estáticos (HTML, CSS, imagens) vão morar aqui.

mkdir public

03 · Prática real

Crie um arquivo index.html dentro da pasta public. Você pode usar qualquer editor de texto para criar — salve como public/index.html dentro do diretório do seu projeto. Essa vai ser a página inicial do seu server.

<!DOCTYPE html>
<html>
<head>
  <title>My First Server</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
    h1 { color: #333; }
  </style>
</head>
<body>
  <h1>Welcome to My Server</h1>
  <p>This page is being served by Node.js and Express.</p>
  <p>I built this myself.</p>
</body>
</html>

04 · Quiz

Por que colocamos arquivos HTML na pasta public/, em vez de escrever no código JavaScript?

JavaScript não consegue conter strings HTML
Para manter as coisas organizadas — arquivos HTML são servidos como estão, sem precisar de processamento
A pasta public/ é mais rápida porque usa um server diferente
Navegadores só conseguem ler pastas chamadas 'public'

05 · Prática real

Agora diga para o Express servir os arquivos da pasta public. Abra o app.js e adicione esta linha depois de const app = express(); e antes de todas as routes app.get(). Essa única linha disponibiliza cada arquivo da pasta public/ pelo seu server.

app.use(express.static('public'));

06 · Prática real

Pare seu server (Ctrl+C) e reinicie, depois acesse http://localhost:3000 no navegador. Em vez do texto puro 'Hello, World!', agora você deve ver uma página HTML estilizada, com título e parágrafos. Esse é o seu index.html sendo servido!

node app.js

http://localhost:3000

07 · Preencher

Para servir arquivos estáticos de uma pasta chamada 'public', adicione este middleware: app.use(express._____('public'))

Outras lições deste capítulo

⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.

※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.