Express: introdução

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

Django falou Python. Express fala JavaScript no Node.js. A Biblioteca da Ribeira ganha um segundo servidor de estudo, na mesma história fictícia do Recife. Os livros continuam inventados.

Pasta: exemplos/30-express-introducao/. Você precisa do Node.js (já usado no capítulo 16). Ciclo: leia, copie, mude um texto, preveja, recarregue e confira. O endereço é sempre http://127.0.0.1:3000/.

O que você vai aprender

• Dizer o que Node e Express fazem neste volume.
• Instalar dependências com npm install.
• Subir o servidor com app.listen(3000, "127.0.0.1").
• Abrir a home e o link de livros.

Node e Express

Node.js é o programa que executa JavaScript fora do navegador. Express é a biblioteca que transforma esse programa num servidor HTTP: recebe um caminho e devolve HTML.

O arquivo package.json descreve o projeto:

{
  "name": "ribeira-express",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.21.0"
  }
}

private evita publicar o pacote por engano. scripts.start é o comando npm start. A dependência é só o Express.

Não há MongoDB nesta pasta. Os títulos virão de dados.json no capítulo 31. Hoje o app.js já lê esse arquivo; o foco é ligar o servidor.

npm install

No PowerShell, entre na pasta do exemplo:

npm install
npm start

npm install lê package.json e cria node_modules. Essa pasta é local. Não copie node_modules para outro curso.

O terminal deve mostrar http://127.0.0.1:3000. Abra exatamente essa barra. Encerre com Ctrl+C.

Erro comum: rodar npm start fora da pasta. O Node não acha app.js. Confira o caminho no prompt.

Pare e experimente. Com o servidor ligado, abra a home. Preveja o h1 “Biblioteca da Ribeira (Express)” e um link Livros.

listen em 127.0.0.1

O coração do exemplo é app.js. Versão completa desta pasta:

const express = require("express");
const fs = require("fs");
const path = require("path");
const app = express();
app.use(express.urlencoded({ extended: false }));
app.get("/", function (_req, res) {
  res.type("html").send(`<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>Ribeira Express</title></head><body><h1>Biblioteca da Ribeira (Express)</h1><p><a href="/livros">Livros</a></p></body></html>`);
});
app.get("/livros", function (_req, res) {
  const livros = JSON.parse(fs.readFileSync(path.join(__dirname, "dados.json"), "utf8"));
  const itens = livros.map((l) => `<li>${l.titulo} — ${l.autoria}</li>`).join("");
  res.type("html").send(`<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>Livros</title></head><body><h1>Livros</h1><ul>${itens}</ul></body></html>`);
});
app.listen(3000, "127.0.0.1", function () {
  console.log("http://127.0.0.1:3000");
});

app.get("/") responde a GET na home. res.type("html").send(...) devolve o documento. lang="pt-BR" vai no HTML gerado.

A linha que importa:

app.listen(3000, "127.0.0.1", function () {
  console.log("http://127.0.0.1:3000");
});

A porta é 3000. O host é 127.0.0.1. Assim o servidor aceita só esta máquina. Django usava 8000. Não misture as portas: um processo por terminal.

Erro comum: abrir app.js com dois cliques. O navegador não executa Express. Só o npm start sobe o HTTP.

Pare e experimente. No send da home, troque só o parágrafo do h1 para citar o cais da Ribeira. Salve. Pare o servidor com Ctrl+C e rode npm start de novo. Recarregue. Preveja o título novo.

O arquivo dados.json já tem dois títulos fictícios. O capítulo 31 explica a rota e o recorte em relação ao Mongo da origem. Hoje basta ver a lista em /livros.

Se a porta 3000 estiver ocupada, encerre o Node antigo com Ctrl+C. Não mude o host. Django, se estiver ligado, usa 8000: outro terminal, outra porta.

Quando http://127.0.0.1:3000/ abrir, avance. Não publique. Não use conta paga para “hospedar” este exercício.

Atividades

1. Qual a diferença entre Node.js e Express neste volume?
2. O que npm install cria nesta pasta?
3. Por que app.listen usa a porta 3000 e o host 127.0.0.1?

Respostas comentadas

1. Node executa JavaScript no computador. Express é a biblioteca que atende pedidos HTTP e devolve HTML.
2. A pasta node_modules com o Express e o que ele precisa. O projeto continua local.
3. 3000 é a porta deste exemplo. 127.0.0.1 prende o servidor a esta máquina. A barra do navegador deve ser http://127.0.0.1:3000/.