Fullstack com Node.js, React e GraphQL  – 5: Integração Contínua com Travis CI

E aí, pessoal! Neste quinto post da série Fullstack com Node.js, React e GraphQL vamos configurar integração contínua com Travis CI.

Integração contínua

Integração contínua (ou CI) é a prática de integrar ao código principal todo novo código desenvolvido (correções ou novas funcionalidades), de forma rápida (várias vezes ao dia) e segura, fazendo verificações automatizadas para garantir que o novo código não “quebra” a aplicação.

Travis CI

Para a nossa aplicação vamos usar um serviço que é gratuito para projetos open-source, o Travis CI. Nosso objetivo é que a cada push realizado para o GitHub sejam feitas as validações:

  • Verificação da formatação com o Prettier
  • Análise estática com ESLint
  • Execução dos testes unitários

Se qualquer uma destas verificações falhar, dizemos que “quebrou a build”, ou seja o novo código não está OK e correções devem ser feitas.

Cadastro

Para se cadastrar no Travis é só visitar https://travis-ci.org, clicar em Sign Up, e escolher a opção de usar sua conta do GitHub.

Já logado, encontre o repositório que queira ativar. Por exemplo:

Configuração

Toda a configuração é feita no arquivo .travis.yml na raiz da aplicação.

O processo de execução das verificações no Travis é feito em dois estágios:

  • install: instalação das dependências
  • script: execução das validações

Podemos configurar o que é feito em cada fase, e também o que é feito antes do install (before_install) e antes e depois do script (before_script e after_script).

Mas antes…

Antes de configurar o Travis, vamos fazer algumas alterações na aplicação.

Separei os scripts do NPM relacionados ao Prettier e ESLint desta forma:

"prettier": "prettier \"./{src,client/src}/\*\*/\*.{js,scss}\"",  
"prettier:check": "npm run prettier -- -l",  
"prettier:write": "npm run prettier -- --write",  
"lint": "eslint \"./{src,client/src}/\*\*/\*.js\"",  
"lint:fix": "npm run lint -- --fix"

O prettier:write e o lint:fix verificam e já fazem as correções nos arquivos. Já o prettier:check e o lint apenas verificam a apontam os erros, que é o que vamos usar no CI.

Vamos também criar um segundo arquivo de configuração de banco, o config/database.ci.js, pois a conexão ao banco de testes no ambiente do Travis é diferente de quando executamos os testes localmente.

module.exports = {  
  test: {  
    username: 'postgres',  
    database: 'mymoney_ci_test',  
    host: '127.0.0.1',  
    dialect: 'postgres',  
    logging: false  
  }  
};

Veja como fica o .travis.yml no nosso caso:

language: node_js  
node_js:  
  - "9.8.0"  
cache:  
  directories:  
    - "node_modules"  
services:  
  - postgresql  
before_script:  
  - cp config/database.ci.js config/database.js  
  - psql -c 'create database mymoney_ci_test;' -U postgres  
script:  
  - npm run prettier:check  
  - npm run lint  
  - npm run test

Definimos que a linguagem é Node.js e a versão que queremos utilizar.

Em cache dizemos para ele cachear a pasta nodemodules_, assim o processo de install fica mais rápido.

Em services habilitamos o PostgreSQL, que vai ser usado na execução dos testes.

Não precisamos definir o passo de install, pois como definimos a linguagem Node.js, por padrão o install é npm install, que é o que precisamos.

No before_script copiamos a configuração de banco e usamos o psql para criar o banco de testes.

Por fim, no script rodamos a verificação do Prettier, o ESLint e os testes.

Status da build no GitHub

Sempre que você fizer um push para o GitHub, o Travis irá executar as validações e indicar no commit se passou ou não:

Selo no README

Você pode, inclusive, colocar um selo como este no seu README, indicando o status da build:

Basta ir na sua conta do Travis, clicar no selo ao lado do nome do projeto, escolher o formato Markdown e colar o código no seu README.md.

Resultado final

O código do projeto até este ponto está em: https://github.com/doug2k1/my-money/tree/v4.2.0

No próximo capítulo

Na próxima parte vamos começar a botar a mão no GraphQL (finalmente) fazendo o lado do servidor, usando Apollo Server.

Stay tuned!

Feedbacks?

E aí, o que está achando até agora? Algo que precisa melhorar?

Tags: | | | |

Sobre o Autor

Douglas Matoso
Douglas Matoso

Desenvolvedor web desde 2008. Criador do Web Dev Drops.

0 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *