CI, CD, Continuous Integration, Continuous Delivery, React Native, Android, iOS, Circle CI

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