Practical CI/CD for React Native

Presented at All Things Open Conference, 2020.

React Native emerges as a popular solution to build Android and iOS applications from a single code base written in JavaScript/TypeScript. For teams just starting to embrace React Native, the best practices to ensure rock-solid development and deployment are not widely covered yet. In this talk, we will discuss practical CI/CD techniques that allow your team to accelerate the process towards the development of world-class, high-quality React Native apps:
- Automated build and verification for every single revision
- Continuous check for code quality metrics
- Easy deployment to the QA/QE/Verification team

Transcript

1. Practical CI/CD for React Native
2. Works on my machine! Pack your machine. We send it to production!
3. Developer *.apk Tester
4. https://martinfowler.com/articles/continuousIntegration.html Martin Fowler Continuous Integration is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily - leading to multiple integrations per day.
5. https://martinfowler.com/articles/continuousIntegration.html Martin Fowler Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible.
7. CI
8. Main branch Feature Branch
9. GitHub Actions github.com/ariya/hello-react-native
12. codequality.yml name: CodeQuality on: [push, pull_request] jobs: check: runs-on: ubuntu-20.04 steps: - uses: actions/checkout@v2 - name: Use Node.js v12 uses: actions/setup-node@v1 with: node-version: 12.x - run: npm ci - run: npm test
14. android.yml name: Android on: [push, pull_request] jobs: build: runs-on: ubuntu-20.04 steps: - uses: actions/checkout@v2 - name: Use Node.js v12 uses: actions/setup-node@v1 with: node-version: 12.x - run: npm ci - run: ./gradlew assembleDebug working-directory: android name: Build Android apk (debug)
17. ios.yml name: iOS on: [push, pull_request] jobs: build: runs-on: macos-latest steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v1 with: node-version: 10.x - run: npm ci
18. ios.yml - run: pod install working-directory: ios name: Install pod dependencies - name: Build iOS (debug) run: "xcodebuild \ -workspace ios/HelloReactNative.xcworkspace \ -scheme HelloReactNative \ clean archive \ -sdk iphoneos \ -configuration Debug \ -UseModernBuildSystem=NO \ -archivePath $PWD/HelloReactNative \ CODE_SIGNING_ALLOWED=NO"
22. CD
24. App Center github.com/ariya/hello-react-native
32. Tester
34. Epilog
35. App Center GitHub Actions
36. Mitigate Human Error 1
37. Guarantee Consistency 2
38. Authoritative Reference 3
39. Extensive Automation 4
40. Archive & History 5
42. Thank You Some artworks are from http://openclipart.org. @ariyahidayat