Como configurar TravisCI para um projeto React Native
Caso voce prefira ver o código todos os passos desse tutorial se encontram neste [LINK].
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:
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 seupackage.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 23buildToolsVersion "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 nopackage-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 Fastfile
e Appfile
.
- o attributo
app_identifier
doAppfile
é encontrado ao abrir o .xcodeproject do seu projeto e procurar o campoBundle Identifier
.
- Agora podemos rodar o comando
bundle exec fastlane ios test
que irá rodar a lane :test que acabamos de definir em nossoFastfile
.
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
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.
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.