Fullstack com Node.js, React e GraphQL - 2: Setup inicial e servidor Node.js com Express
E aí, pessoal! Neste segundo post da série Fullstack com Node.js, React e GraphQL vamos fazer o setup inicial do projeto e o básico do servidor Express.
O código final desta parte do projeto está aqui: https://github.com/doug2k1/my-money/tree/v1.0.0
Pré-requisitos
Ter Node.js (com npm) e Git instalados, terminal e um bom editor de códigos. É importante também saber o básico de utilização do npm, como instalar um módulo, diferença entre dependencies e devDependencies, criar e usar npm scripts.
Estrutura de pastas
Vamos estruturar a aplicação de forma que o backend e o frontend fiquem no mesmo repositório. Na raiz da aplicação fica o código do servidor (back) e na pasta client fica o código do cliente (front). Estamos seguindo mais ou menos a estrutura mostrada no curso Node with React: Fullstack Web Development, do Stephen Grider.
my-money/ client/ … arquivos do front src/ … código-fonte do server .gitgnore .npmrc
O .gitignore lista os arquivos e pastas que serão ignorados pelo Git. Podemos começar colocando node_modules aí. O .npmrc define opções para o npm. No meu caso só coloquei progress=false para desabilitar a barra de progresso na instalação de módulos e agilizar um pouco o processo.
Os primeiros passos serão inicializar o repositório Git com git init e criar o package.json com npm init -y.
Vamos definir a versão do Node no package.json:
"engines": {
"node": "9.x.x"
}
Isso será usado mais pra frente por alguns módulos, como ESLint, e também no processo de build no Heroku.
Prettier
Pra garantir a formatação consistente do código JS vamos usar o Prettier. Melhor ainda se configurado no editor para formatar automaticamente ao salvar. No site dele tem as instruções para integrar com a maioria dos editores.
npm i -D prettier
Você pode criar um arquivo .prettierrc na raiz da aplicação para configurá-lo. A única opção que coloco é singleQuote: true para ele formatar strings com aspas simples. De resto vai o default mesmo.
Você também pode criar um script npm para rodar o Prettier em todos os arquivos:
"prettier": "prettier --write \"./{src,client/src}/**/*.{js,scss}\""
A opção --write já vai aplicar a formatação em todos os arquivos que estiverem fora do padrão.
ESLint
Vamos usar o ESLint para fazer análise estática do código e garantir algumas boas práticas. Assim como o Prettier, o ESLint pode ser integrado ao editor para mostrar os erros de validação direto no código.
npm i -D eslint eslint-config-prettier eslint-plugin-node
Além do core do ESLint, instalamos o eslint-config-prettier para evitar conflitos de outros plugins com as regras de formatação do Prettier, e o eslint-plugin-node, que adicionar algumas regras para código Node.js.
Vamos criar o .eslintrc.js na raiz da aplicação para configurar o ESLint, com o conteúdo:
module.exports = {
root: true,
plugins: ['node'],
extends: ['plugin:node/recommended', 'prettier'],
env: {
node: true,
},
}
Com isso estamos usando as regras recomendadas para desenvolvimento Node.js.
Vamos também adicionar um script npm:
"lint": "eslint --fix \"./{src,client/src}/**/*.js\""
A opção --fix vai corrigir automaticamente os erros que forem possíveis e alertas sobre os que não forem possíveis de corrigir automaticamente.
Servidor Express
Vamos instalar o Express:
npm i express
E inicializar o servidor no arquivo src/index.js:
const path = require('path')
const express = require('express')
const app = express()
// static files
app.use(express.static('public'))
// start server
app.listen(process.env.PORT || 5000)
Aqui estamos configurando o servidor para servir o que estiver na pasta public como conteúdo estático.
Na última linha iniciamos efetivamente o servidor na porta que estiver na variável de ambiente PORT ou na porta 5000 se não tiver a variável. Isso significa se executarmos node src/index ele vai rodar na 5000 ou se fizermos PORT=9999 node src/index ele roda na porta 9999.
Vamos adicionar um script npm pra facilitar a execução:
"start": "node src/index"
Por fim adicionamos um arquivo HTML em public/index.html. Como o servidor está servindo o que estiver na pasta public, ao acessar http://localhost:5000 ele vai servir o index.html.
Agora é só executar npm start e acessar http://localhost:5000:
Resultado final
O código do projeto até este ponto está em: https://github.com/doug2k1/my-money/tree/v1.0.0
No próximo capítulo
Na próxima parte vamos adicionar o banco de dados PostgreSQL na jogada. Stay tuned!
Feedbacks?
E aí, o que está achando até agora? Algo que precisa melhorar?
Tags: full-stack|graphql|nodejs|react