Our tech process, how we make apps using React Native on Gitlab with Gitlab CI (Continuous Integration) and CD (Continuous Delivery) Reveal JS source on GitHub: https://github.com/Lingvokot/gitlab-and-lingvokot

1. Gitlab and
Lingvokot
+

2. Gitlab

3. Almost same as GitHub
Organizations

5. Almost same as GitHub
Projects

7. Almost same as GitHub
Issues

9. Almost same as GitHub
Issues with Labels

11. Almost same as GitHub
Pull Requests named as Merge Requests

13. Almost same as GitHub
Milestones

14. Almost same as GitHub
Tags

15. and other...
...but

16. Integrated CI
Pipelines
Combination of actions: test, build, deploy

17. Integrated CI
Builds
Job run: logs and result

18. Gitlab Continuous Integration

19. Short info about Gitlab CI
differences
Runner
A server that processes builds. It receives commands from
GitLab CI.
Build
Execution of a particular job.
Job
"Wrapped" bash script (before_script, "only" git ref, runner tags,
cache...)
Stage
Group of jobs. Builds of next stage are run after success of
previous.
Environment
Just a group of deploy jobs for now. Later will have approvement

20. for each environment in chain.
Easy setup
Add runners

21. Easy setup
Add .gitlab-ci.yml

22. Generated by bash shell script in Gitlab CI
job.
Custom addons
Badges

23. Custom addons
Badges
Actually they are links to our static WEB server,
where gets exported coverage info, static analysis results

24. Coverage on WEB Server
Generated by Jest, test runner used with React Native

25. Static analysis WEB Server
Generated by Plato

26. More info
See in this presentation:
Using Gitlab CI

27. Gitlab Continuous Delivery

28. TL;DR: How to create CD
process
both for beta and prod
Find a tool for working with stores (upload apk, ipa, upload
metadata of app), get wraps for xcode, gradle
Export your secrets (keys, accounts) into servers, make these
servers tagged Gitlab CI runners
Create a super-tweaked job in .gitlab-ci.yml

29. "a tool for stores"
Fastlane

31. Fastlane can (for us)...
Run native tests (still a TODO)
Build & sign xcode project in a CLI with dozen options (builds
gradle projects for sure)
Upload builded bundle (apk, ipa) to store on all 3 channels for
GPlay and TestFlight+AppStore for iOS
Also, upload app metadata (screenshots, description,
changelogs...) on that stores
Send slack messages by the way (may be useless...)

32. And magic Gitlab CI job
Not so magic, but how to do it?
A Condition: Fastlane lanes are written (build, deploy for android &
iOS), remote servers handle it just ne, they attached to Gitlab CI as
runners and have tags
Build: Job depends on npm test job. run fastlane ios build on a
build stage, capture your XCode archive and ipa as artifacts
Deploy: Job depends on build job. run fastlane ios beta on a
deploy stage, on some environment beta and prod
Almost same for android

33. A code snippet for ios build
Notice that react-native packager terrible workaround
ios:build:
before_script:
- source /etc/profile
- export PATH="$CI_PROJECT_DIR/node_modules/.bin:$PATH"
- nvm use
- npm set progress=false && npm prune && npm install && npm set progress=true
stage: build
script:
- react-native start &
- sleep 2
- kill_packager () { kill -9 $(lsof -n -ti4TCP:8081); kill -9 $(lsof -at -c node -c watchman
- fastlane ios build && kill_packager || (kill_packager; exit 2)
dependencies:
- run:node
artifacts:
paths:
- Break a Сode.ipa
- Mastermind.xcarchive
tags:
- nvm
- xcode
- fastlane
cache:
key: "$CI_BUILD_REF_NAME"
paths:
- node_modules/

34. Code snippet for ios deploy to
TestFlight
ios:deploy:beta:
before_script:
- source /etc/profile
stage: deploy
environment: beta
script:
- export FL_IOS_BUILD_VERSION=$(git describe --tags --abbrev=0
--contain --match "v[0-9]*" 2>/dev/null |
sed 's/.*v([0-9.]*).*/1/' 2>/dev/null);
- '[ "$FL_IOS_BUILD_VERSION" ]
&& echo "Deploy $FL_IOS_BUILD_VERSION to beta"
|| (echo "Skip deploy to beta channel" 1>&2 ; exit 2)'
- fastlane ios beta
only:
- /^v[0-9.]+$/
dependencies:
- ios:build
tags:
- xcode
- fastlane

35. About versioning
A contract: v1.0 for beta releases, v1.0-production for production
releases
Use git tags for deployment
Restrict executing of deploy jobs for that git tags with a regexp:
/^v[0-9.]+/ for beta and /^v[0-9.]+-production/
Use git commit count as a version code (xcode) or build number
(gradle)
In a job scripts, capture git tag and use it as version name
If no git tag speci ed, use 0.0.1 by default (fallback)

36. Code for versioning
SHORT_VERSION=$(git --git-dir="${PROJECT_DIR}/../.git" describe
--tags --abbrev=0 --contain --match "v[0-9]*" |
sed 's/.*v([0-9.]*).*/1/' 2>/dev/null)
VERSION=$(git --git-dir="${PROJECT_DIR}/../.git" rev-list
--no-merges --count master)
APP_INFO_PLIST_PATH="${TARGET_BUILD_DIR}/${INFOPLIST_PATH}"
defaults write "$APP_INFO_PLIST_PATH" CFBundleShortVersionString $SHORT_VERSION
defaults write "$APP_INFO_PLIST_PATH" CFBundleVersion $VERSION

37. React Native and friends

38. Bootstrappin
React Native provides generator which created xcode project and
android project
Next steps: npm install, code and have fun!

39. Things to use with RN
Eslint with custom .eslintrc
Flow (integrates with Nuclide, RN IDE)
Jest (test runner)
Redux (mix of ux, elm...)

40. Workflow

41. Github flow
Master is always stable and deployable
For every feature (or bug x) new branch is created from master
Developer pushes feature branch on a server many times
After work seems done, developer creates Pull Request into
master
After PR gets merged into master, feature branch is removed

42. Redux ducks
TL;DR; actionCreators, actionTypes, reducers are in one le
And:
ducks export default a reducer function
exports actionTypes and actionCreators as named exports
actionType naming form: module/action
actionType variable is UPPER_UNDERSCORE_CASE

43. Our file structure
A bunch of modules

44. Will this work?
NO (about 60% of les are inside of /game/)

46. How my commit gets
deployed?
1. It gets reviewed on Merge Request rst
2. At same time, CI server runs [unit] tests and analyzes coverage
3. After commit gets merged into master, CI server runs [unit] tests
for master branch
4. After "Green", build job are launched for iOS and android in
parallel, resulting in artifacts (ipa + apk)
5. Then, after "Green" build, on a master branch, nothing is
happened
6. We download artifacts, launch and test (if you want), then add a
tag on that commit
7. Gitlab CI runs all sequence of test+build for tag ref (v1.0)
8. Then, nally, it runs deploy job for git tag ref. Channel (beta, prod)

47. is selected by tag name (v1.0 for beta, v1.0-production for
production)
Rollback
Stores are immutable, so you need to add a next version with patch
version bump and release it
v1.0
➡ OMG, fail
➡ git bisect to stable or fix a bug
➡ v1.0.1

48. Questions?

49. THE END
Presentation Max Sysoev. My GitHub:
Our organization on GitHub:
github.com/ColCh
github.com/Lingvokot