
E aí, pessoal! Neste quinto post da série [**Fullstack com Node.js, React e GraphQL**](/fullstack-node-react-graphql-introducao-2c2f18c757c4) vamos configurar integração contínua com [**Travis CI**](https://travis-ci.org/).

<PostImage
  src="/fullstack-node-react-travis-ci-2caaee9ccbb5/images/fullstack-5-1-1024x558.png"
  width="1024"
  height="558"
  alt=""
/>

## 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**](https://travis-ci.org/). 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](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:

<PostImage
  src="/fullstack-node-react-travis-ci-2caaee9ccbb5/images/fullstack-5-2-1024x219.png"
  width="1024"
  height="219"
  alt=""
/>

### 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:

```json
"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.

```javascript
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:

```yaml
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 \_node_modules\_, 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:

<PostImage
  src="/fullstack-node-react-travis-ci-2caaee9ccbb5/images/fullstack-5-3-1024x358.png"
  width="1024"
  height="358"
  alt=""
/>

### Selo no README

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

<PostImage
  src="/fullstack-node-react-travis-ci-2caaee9ccbb5/images/fullstack-5-4-1024x328.png"
  width="1024"
  height="328"
  alt=""
/>

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_.

<PostImage
  src="/fullstack-node-react-travis-ci-2caaee9ccbb5/images/fullstack-5-5-1024x232.png"
  width="1024"
  height="232"
  alt=""
/>

## Resultado final

O código do projeto até este ponto está em: [https://github.com/doug2k1/my-money/tree/v4.2.0](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**](https://www.apollographql.com/docs/apollo-server/).

_Stay tuned!_

## Feedbacks?

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


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

Comentários