Curso de FrontendTutorialPublicado em 15 de abril de 20264 min de leitura

Criando o repositório backend-node e instalando o projeto

Crie o repositório backend-node, inicialize o projeto com npm init e instale as dependências principais.

#Curso de Frontend
#Backend com Node.js
#Backend
#Node.js
#npm
#Express

Criando o novo repositório

Agora vamos criar o primeiro projeto backend do curso. O nome visual pode ser Backend Node, mas o nome técnico do repositório será backend-node.

No GitHub, entre na sua conta, clique no botão New para criar um repositório, preencha Repository name com backend-node e crie o repositório. Se você já configurou SSH no curso, copie a URL SSH do repositório. Ela costuma ter o formato git@github.com:seu-usuario/backend-node.git.

No Git Bash, vá para a pasta onde os projetos do curso ficam salvos. Neste curso, estamos usando ~/Desktop/curso-frontend como exemplo. Troque seu-usuario pelo seu usuário real do GitHub antes de rodar o clone.

Lendo os comandos: cd entra em uma pasta, git clone baixa o repositório do GitHub para o computador, cd backend-node entra na pasta baixada e code . abre essa pasta no VS Code. O ponto em code . significa pasta atual.

cd ~/Desktop/curso-frontend
git clone git@github.com:seu-usuario/backend-node.git
cd backend-node
code .

Inicializando com npm init

Com a pasta backend-node aberta no VS Code, abra o terminal integrado pelo menu Terminal > New Terminal. Confirme que o terminal está dentro da pasta backend-node antes de continuar.

O comando npm init cria o package.json, arquivo que guarda informações do projeto, scripts e dependências.

npm init -y

Ajustando o package.json

Depois do npm init, abra o arquivo package.json na raiz do projeto backend-node. Substitua o conteúdo dele pelo exemplo abaixo ou ajuste os campos para ficar igual.

Vamos usar type module para trabalhar com import e export, além de scripts para desenvolvimento e execução. O script dev usará nodemon para reiniciar o servidor automaticamente quando o código mudar.

Lendo o package.json: name é o nome técnico do projeto, type module permite usar import em vez de require, main aponta para o arquivo principal e scripts cria atalhos para rodar comandos com npm run dev ou npm start.

{
  "name": "backend-node",
  "version": "1.0.0",
  "description": "Backend em Node.js para o curso Frontend do Zero.",
  "type": "module",
  "main": "src/server.js",
  "scripts": {
    "dev": "nodemon src/server.js",
    "start": "node src/server.js"
  },
  "license": "ISC"
}

Instalando dependências

Ainda no terminal da pasta backend-node, instale as dependências do backend.

Express cria o servidor, cors configura acesso do frontend, dotenv carrega variáveis de ambiente e mysql2 conecta ao MySQL ou MariaDB. Nodemon será instalado como dependência de desenvolvimento.

Lendo os comandos: npm install salva bibliotecas usadas pelo código da aplicação. O -D em npm install -D nodemon indica dependência de desenvolvimento, usada para programar, mas não como regra de negócio do backend.

npm install express cors dotenv mysql2
npm install -D nodemon

Criando o primeiro servidor

Na raiz do projeto backend-node, crie uma pasta chamada src. Dentro dela, crie um arquivo chamado server.js. O caminho final precisa ficar assim: backend-node/src/server.js.

Cole o código abaixo dentro de src/server.js e salve o arquivo. Essa primeira versão cria uma rota simples de status para verificar se o backend está funcionando.

Lendo o código: import express carrega a biblioteca, const app = express() cria a aplicação, const port = 3001 define a porta local, app.get cria uma rota GET e app.listen mantém o servidor ligado esperando requisições.

Dentro da rota /api/status, req representa a requisição recebida e res representa a resposta enviada. Neste primeiro teste não usamos req, apenas res.json para devolver um objeto em formato JSON.

import express from "express";

const app = express();
const port = 3001;

app.get("/api/status", function (req, res) {
  res.json({
    message: "Backend funcionando"
  });
});

app.listen(port, function () {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Rodando e testando

No terminal da pasta backend-node, rode o servidor em modo desenvolvimento. Se tudo estiver correto, o terminal mostrará a mensagem Servidor rodando em http://localhost:3001.

Depois, abra o navegador e acesse http://localhost:3001/api/status. A resposta esperada é um JSON com a mensagem Backend funcionando. Se essa resposta aparecer, o servidor inicial está pronto.

npm run dev

node_modules, package-lock e .gitignore

Na raiz do backend-node, crie um arquivo chamado .gitignore se ele ainda não existir. Coloque node_modules e .env dentro dele.

node_modules guarda as bibliotecas instaladas e não deve ir para o GitHub. package-lock.json registra as versões exatas e deve ser versionado, então não coloque package-lock.json no .gitignore.