Como configurar TravisCI para um projeto React Native

Caso voce prefira ver o código todos os passos desse tutorial se encontram neste [LINK].

Photo by Icons8 team on Unsplash

Introdução

Neste post descrevei sobre como configurar um servidor de integraçāo contínua para um projeto React Native usando Travis CI.
A abordagem que seguirei visa simplicidade, por isso nāo abordarei de automaçāo de release ou distribuiçāo.

Pré-requisitos

Para este tutorial precisamos ter as seguintes ferramentas:

• Ambiente de desenvolvimento React Native.
• Bundler.

Māo na Massa!

Vamos começar um projeto do zero com react-native init ReactNativeTravisCI caso voce já tenha um projeto em andamento os passos sāo os mesmo.

Processo de Build em Android

O processe de build do android é mais simples, por isso começaremos com ele.

Crie na pasta raiz um arquivo chamado .travis.yml, este arquivo contem a configuraçāo do nosso servidor. Pronto! isso é tudo que precisamos fazer para que o TraviCI valide a nossa build em android.

Alguns pontos importantes:

• adicionar o campo engine em seu package.json. Com isso voce declara exatamente qual versão do NPM e do Node vai rodar em ambiente de CI, Exemplo.
• usamos os componentes android que estāo listado em android/app/build.gradle, no meu caso:

compileSdkVersion 23
buildToolsVersion "23.0.1"

por isso que tivemos que adicionar as seguintes linhas:

android:  
  components:    
    - build-tools-23.0.1    
    - android-23
before_install:  
  - yes | sdkmanager "platforms;android-23"  
  - yes | sdkmanager "build-tools;23.0.1"

Caso a sua versāo seja diferente e nāo consiga achar, voce pode usar o comando sdkmanager --list`que listará todas as versōes no TravisCI.

• npm ci, prefira usar a task CI ao invés da install. Ela força que sejam instaladas exatamente as mesmas versōes contidas no package-lock.json.
• Procure assegurar que seus ambiente local e seu ambiente de CI compartilham as mesmas versōes do node e do npm. Neste exemplo isto é feito através de nvm e do campo engines, do package.json
• Use versōes absolutas nos gerenciadores de dependência, sério, o gerenciamento de dependências em React Native é frágil, é comum que uma dependência Javascript possua dependências Javascript e Android e iOS. Por isso sempre que adicionar uma dependência no seu package.json, build.gradle, Podfile, Gemfile, nunca use versōes relativas.

Adicionando seu repositório no travis-ci.org

Vamos subir este projeto para um repositório no github e fazer com que o TravisCI valide cada commit que dermos.

O Processo é bem simples e intuitivo:

• Entre em https://travis-ci.org/ e forneça acesso aos seus repositórios.
• Procure o seu projeto e habilite-o. Como demonstrado na imagem abaixo:

• `Clique no Hamburguer Button e vá em settings, ligue a opçāo Build only if .travis.yml is present.

• Agora faça algum commit e provavelmente isto acontecerá:

Processo de Build em iOS

Existem algumas maneiras se fazer isso em iOS, neste post procurei demonstrar a maneira que eu acho ser a mais fácil e que atende ao nosso objetivo. Para isto usaremos Fastlane.

Configurando Fastlane

Na pasta raiz do projeto, rode o seguinte comando: bundle init em seguida bundle add fastlane. Isto fará com que o Fastlane seja instalado local e possa ser executado através de bundle exec fastlane.

O próximo passo é preparar o Fastlane para executar a açāo de validar a nossa build iOS. O que fazemos criando uma pasta fastlane/, na raiz do nosso projeto e adicionando os arquivos Fastfilee Appfile.

• o attributo app_identifierdo Appfile é encontrado ao abrir o .xcodeproject do seu projeto e procurar o campo Bundle Identifier.

app_identifier = Bundle Identifier

• Agora podemos rodar o comando bundle exec fastlane ios testque irá rodar a lane :test que acabamos de definir em nosso Fastfile.

Primeira execuçāo do Fastlane vai ser um error.

Fiquem tranquilos, a primeira execuçāo do bundle exec fastlane ios test vai ser um error. Neste caso temos duas opçōes: consertar o teste ou ignora-lo.
Por questōes didáticas, vamos remove-los por enquanto.

• Procure o arquivo ios/${NOME_DO_SEU_PROJETO}Tests/${NOME_DO_SEU_PROJETO}Tests.m` e remova os casos de teste. COMMIT REFERÊNCIA

Arquivo de teste, com os testes removidos.

Rode novamente bundle exec fastlane ios test e os testes hāo de passar.
[Na verdade, nós removemos eles, mas tudo bem.]

Configurando TravisCI para rodar build iOS

Agora precisamos que o TravisCI inicie duas VMs para rodar nossos testes, uma com ambiente android e outra com um ambiente iOS preparado.
Para isto precisaremos alterar o .travis.yml para rodar a build em dois ambientes distintos.

O processo do iOS é bem simples, precisamos de instalar o jq porque o ambiente iOS do travis nāo vem com ele por default. Logo após instalamos o fastlane através do bundler, e depois rodamos exatamente a mesma task que rodamos no PC para validar a build iOS.

versāo final da pipeline validada com sucesso.

Conclusão

O objetivo deste post era mostrar uma maneira simples de validar as build de android e iOS para um projeto React Native. Ainda falta muito para ser uma pipeline completa, pois precisaríamos validar o código JS, rodar testes, linter, changelog, distribuir, etc…
Caso tenham interesse, posso compartilhar como podemos fazer uma pipeline mais completa e como automatizar melhor os nossos processos repetitivos do dia a dia. Tenho dois repositórios que possuem exemplos de algumas coisas legais que podem ser feita.

Nāo deixem de comentar, obrigado e até a próxima.

eduardomoroni/react-native-boilerplate

eduardomoroni/trading-card-manager