This document discusses CI/CD for React Native applications. It begins with an overview of CI/CD and existing tools like CircleCI, TravisCI, and Jenkins. The benefits of CI/CD are automation of linting, type checking, testing, building, and delivery. For React Native, CI/CD can be implemented with CircleCI to run jobs on commits and merges, including building variants, running tests, and delivering to external services. Fastlane is also discussed for matching certificates, building variants, and delivering to app stores. Open source React Native libraries and CircleCI orbs are mentioned. The document concludes with upcoming topics like quasi-continuous delivery at Facebook and code pushing at Microsoft.

1. CI/CD for React Native
João Marins

2. João Marins
@jgcmarins @jgcmarins
2

3. Topics
3
- What is CI/CD?
- Existing tools
- Benefits of CI/CD
- CI/CD Everywhere
- CI/CD & React Native
- Circle CI
- CI on Branches
- CD on Merges
- Lint
- Type check
- Tests: unit & e2e
- Fastlane: match & delivery
- Build variants
- Human factor
- Open source
- Orbs
- What is next?
- Questions

4. What is CI/CD?
4

5. Existing Tools
5
Circle CI: https://circleci.com/
Travis CI: https://travis-ci.org/
Jenkins: https://jenkins.io/

6. 6
Benefits of CI/CD
- Automation
- Automation
- Automation
- Automation
- Automation
- Lint
- Type check
- Tests: unit & e2e
- Build (!!!)
- Delivery (!!!)

7. 7
No Human Factor

8. 8
CI/CD Everywhere

9. 9
CI/CD & React Native
https://hub.docker.com/r/entria/react-native-android/
config.yml

10. Circle CI
10

11. Circle CI
11
- Setup env
- Setup Linux
- Setup Mac
- Cache node_modules
- Install additional deps
- Workflows
- Run jobs
- Sign in to AWS
- Store artifacts
- Save tests result
(coverage)

12. Circle CI Workflows
12

13. config.yml
13

14. Strategies
14
- Every commit should run basic steps
- Every merge should build alpha versions

15. Basic Steps
15
- Lint
- Type Check
- Unit Tests
- E2E Tests
On Circle CI
Integration is
possible!!!

16. On merge
16
- Full build: alpha version
- Delivery to testers

17. Full Build + Delivery
17

18. Delivery: Fastlane
18
https://fastlane.tools/

19. Fastlane
19
- Match certificates
- Build variants: alpha, beta, release
- Delivery to Test Flight
- Delivery to Android Beta Testers

20. More about Fastlane
20
https://bit.ly/2N4xOZz

21. Open Source: libs
21
- https://github.com/react-native-
community/react-native-camera
- https://github.com/react-native-
community/react-native-share

22. Open Source: Circle CI Orbs
22
“Orbs are packages of CircleCI configuration that can be shared across
projects. Orbs allow you to make a single bundle of jobs, commands,
and executors that can reference each other and can be imported into a
CircleCI build configuration and invoked in their own namespace. Orbs
are registered with CircleCI, with revisions expressed using the semver
pattern.”
https://github.com/CircleCI-Public/circleci-orbs#what-are-orbs

23. What is next?
23

24. Quasi Continuous
(Facebook)
&
Code Push (Microsoft)
24

25. - https://circleci.com/docs/
- https://github.com/CircleCI-Public/config-preview-sdk
- https://bit.ly/2N4xOZz
- https://code.fb.com/web/rapid-release-at-massive-scale/
- https://microsoft.github.io/code-push/
Links
25

26. Thanks!!!
26