CI/CD || Circle CI || React Native Android ( only )

There always comes a time for a company where they feel the need to automate not only their tests, but also the builds, and CI/CD, which is a nightmare for all the developers, soon becoming a reality.

Night Mare
what went wrong :-(
- &restore-yarn-cache
name: Restore cached root node_modules
key: yarn-cache-{{ checksum "yarn.lock" }}
- &save-yarn-cache
name: Save node_modules to cache
key: yarn-cache-{{ checksum "yarn.lock" }}
- node_modules
I generally use yarn in my project hence I am caching the yarn.lock file, if you use npm, you can cache package-lock.json file instead.
To do so, you just have to replace the yarn.lock file in the above code block with package-lock.json and you will be good to go.Note: What circleCI does for caching is that it stores a custom cache based key for the file you wish to cache and upload it to there server, at the time you store the cache and hence for every subsequent builds, it uses the cached file to prevent the same activity again and hence subsequent builds becomes relatively faster.
- image: reactnativecommunity/react-native-android
Here "android" is the job name, which uses "docker" image as an executor base.
Note: One can also cache the docker images used in the pipeline in circle ci, but this feature is not supported in the base plan.
To know more about caching a docker image refer docs.
Now we define the steps of job*//*
Writing steps though is most straight forward task of all but it also needs a very thorough clarity of what one wish to achieve with the job
checkout -> this steps ensure that you are the root directory of your project.
- checkout/*
restore_cache: *restore-yarn-cache -> Notice here we used the alias we defined above, what it does ( as it name suggest ) looks for a cache of the dependencies and restores them if available.
- restore_cache: *restore-yarn-cache
- run:
name: yarn install
command: yarn install
Followed by this we ran another job with name "yarn install" here we basically install the dependencies again, to be precise, install if not found in node_modules, which got restored by the restore cache step we did earlier.
This works in the same manner as the yarn or npm install command works on our local machines.
- save_cache: *save-yarn-cache/*
Notice here we used the save cache alias we defined above, this basically updates the cache of the yarn.lock file if it was changed from the previous version of it.
- run:
name: env file
command: ENVFILE=.env.development
- run:
name: jetify
command: npx jetify
Followed by that we attached the "env" file as per the requirement to the build phase so as to get the environment variables set, similarly I ran jetify for AndroidX based dependencies in the project.
- run:
name: react bundle
command: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/
In the above step we created the development bundle for the react native application, followed to which we created our debug apk.
Note: We never push files to version control and hence here I am maintaining an example version of the same which I later copied on the fly.
- run:
name: android build
command: |
cd android
chmod +x gradlew && ./gradlew assembleDebug
/*If your team is using some OTA Update methods like codepush you can set up there respective commands in the package.json file and run the from here, like this - run:
name: OTA Update Alpha
command: yarn ota_update_alpha_command_from_packageJSON_script

version: 2
- android
We define a workflow called "build_and_test", it is just a name, you can call as it anything.
Important thing is the following
Here, we called a job called android which we defined above, and hence the job is called and if we did all right, we will have a successful execution of your pipeline.
Keep coding !!

Shubham Kakkar | Gmail | Github | LinkedIn

I’m a freelance, multi-disciplinary Web-App Developer who’s delivered creative and engaging tech solutions to various startups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store