Um servidor pequeno com Express

Constrói o teu próprio servidor em Node.js e Express. A tua primeira API responde ao primeiro pedido.

Vou mostrar-te: configurar um servidor

Express é o pacote mais popular para construir servidores em Node.js – transforma o trabalho em poucas linhas. Um servidor é um projeto separado, à parte da app React (lembra-te: frontend e backend são duas metades). No terminal:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir cria uma pasta (make directory),
npm init -y configura um projeto Node.js novo (cria package.json),
npm install express descarrega Express.

Abre a pasta no VS Code e cria um ficheiro chamado server.js:

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

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Corre-o:

node server.js

E abre http://localhost:3900/api/hello no browser. Vês a resposta JSON? Acabaste de construir um servidor. Sem magia – 10 linhas.

O que acontece no código:

require("express") – pede emprestado um pacote (a versão servidor de import).
app.get("/api/hello", ...) – «responde a pedidos GET neste endereço.» Esse par endereço + resposta chama-se endpoint.
response.json({...}) – devolve JSON.
app.listen(3900) – escuta na porta 3900. (O Vite corre na 3901, o servidor na 3900 – dois programas não podem escutar na mesma porta.)

Paras o servidor com Ctrl+C. E cuidado: depois de cada alteração ao código, tens de parar e reiniciar – um servidor não é Vite, não se atualiza sozinho.

Vou mostrar-te: um servidor com dados

Um servidor normalmente entrega dados. Adiciona um segundo endpoint acima de listen:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

Reinicia o servidor e abre http://localhost:3900/api/results – os teus dados, servidos através de uma API. É assim que funciona todo o site grande (só com base de dados em vez de array).

Agora és tu 💪

Põe um servidor a correr seguindo o guia.
Adiciona um endpoint com dados do teu projeto: 🏫 /api/menu (array de refeições da semana) · 🙋 /api/favorites (os teus jogos/livros favoritos) · 🌍 /api/trips (lista de viagens) · ⚽ /api/results (resultados de jogos).
Adiciona um endpoint divertido /api/random que devolve uma mensagem diferente cada vez:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

Experimenta todos os endpoints no browser – e depois tenta chamar um com fetch() na consola, como aprendeste na última lição.

⚠️

«Cannot GET /api/…» significa que o endpoint não existe – verifica erros de escrita no endereço e se reiniciaste o servidor depois de o alterar. «EADDRINUSE» significa que a porta 3900 já está em uso – provavelmente tens um servidor antigo noutro terminal; encontra-o e para-o (Ctrl+C).

✅

Verifica tu: O teu servidor corre na porta 3900 e responde em vários endpoints com os teus dados JSON. Conheces o frontend, estás a começar no backend – só falta ligá-los. Fazemos isso na próxima lição com um livro de visitas.

O que ficas a saber desta lição

Um servidor em Express: npm init -y, npm install express, node server.js, parar com Ctrl+C, reiniciar após cada alteração.
Um endpoint = um endereço + uma resposta: app.get("/api/something", (request, response) => response.json(...)).
O frontend (3901) e o backend (3900) são dois programas em duas portas.

Esta lição faz parte de um nível pago

Vou mostrar-te: configurar um servidor

Vou mostrar-te: um servidor com dados

Agora és tu 💪

O que ficas a saber desta lição