REGISTER

Shipping Fast with Continuous Deployment

Mike Grabowski
2022-06-06

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

The following article is part of The Ultimate Guide to React Native Optimization.

Establish a continuous deployment setup to ship new features and verify critical bugs faster.

Issue: Building and distributing your apps manually is a complex and time consuming process.

As you have learned in the previous section, automation of the critical pieces of the development lifecycle can help you improve the overall development speed and security. The shorter feedback loop, the faster your team can iterate on the product itself.

However, testing and development are only a part of the activities that you have to perform when working on a product. Another important step is the deployment – building and distributing the application to production. Most of the time, this process is manual.

The reason for that is simple - the deployment takes time to set up and is far more complex than just running tests in the cloud. For example, on iOS, Xcode configures many settings and certificates automatically. This ensures better developer experience for someone who’s working on a native application. Developers that are used to such an approach often find it challenging to move the deployment to the cloud and set up such things as certificates manually.‍

The biggest downside of the manual approach is that it takes time and doesn’t scale. As a consequence, teams that don’t invest in the improvements to this process end up releasing their software at a slower pace.

A graph illustration of the process

What is Continuous Deployment (CD)?

Continuous Deployment is a strategy in which software is released frequently through a set of automated scripts. It aims at building, testing and releasing software with greater speed and frequency. The approach helps reduce the cost, time and risk of delivering changes by allowing for more incremental updates to applications in production.

You are not shipping new features and fixes as quickly as you should.

Building and distributing your application manually slows down your development process regardless of how big your team is. Even in small product teams of around five people, automated build pipelines make everyone’s work easier and reduce unnecessary communication. This is especially important for remote companies.

Continuous Deployment also allows you to introduce standards and best practices focused on improving the overall performance of the application. Some of them have been previously discussed in this guide. With all the steps required for the deployment in a single place, it is very easy to ensure that all releases are done the same way and enroll company-wide standards.

Solution: Establish a continuous deployment setup (based on “fastlane”) that makes the build and generates the changelog. Ship to your users instantly.

When it comes to automating the deployment of the mobile applications, there are two ways to go.

The first way is to write a set of scripts from scratch by interacting with “xcode” and “gradle” directly. Unfortunately, there are significant differences between the tooling of Android and iOS and not many developers have enough experience to handle this automation. On top of that, iOS is much more complicated than Android due to advanced code signing and distribution policies. And as we have said before, if you are doing it manually, even Xcode cannot help you by doing its magic.

https://fastlane.tools/

The second way is to use a pre-existing tool in which the developers have handled the majority of use cases. Our favorite one is fastlane - a set of modular utilities written in Ruby that let you build your iOS and Android applications by writing a set of instructions in a configuration file.

After you have successfully built your binaries, it is time to deploy it to its destination. Again, you can either upload the files to a desired service (e.g. App Store) manually or using a tool that will take care of that for you. For the same reasons as before, we prefer to use an existing solution - in this case, AppCenter by Microsoft.

Visual Studio App Center logo

AppCenter is a cloud service with tooling for automation and deployment of your application. Its biggest advantage is that many of the settings can be configured from the graphical interface. It is much easier to set up the App Store and Play Store deployments this way, rather than working with uploads from the command line.

For the purpose of this section, we will use fastlane and AppCenter in CircleCI pipelines to fully automate the process of app delivery to the final users.

<p-bg-col>Note: Describing the ins and outs of the setup would make this article too long. That’s why we have chosen to refer only to the specific documentation. Our goal is to provide you with an overview, and not a step-by-step guide, since the final config will be different for each project.<p-bg-col>

Setting up fastlane

Before going into the details for Android and iOS, you have to make sure that the fastlane has been installed and configured on our devices.

Next, you have to run the init command within the React Native project. We will run the "fastlane" command twice, from each native folder. This is because React Native is actually two separate apps at a low-level.

As a result, this command will generate setup files in both "ios" and "android" folders. The main file in each folder would be called Fastfile and it’s where all the lanes will be configured. In fastlane nomenclature, a lane is just like a workflow - a piece that groups low-level operations that deploy your application.

Low-level operations can be performed by calling actions – predefined fastlane operations that simplify your workflow. We will show you how they function in the next section.

Setting up fastlane on Android

Now that you have successfully set up fastlane in our projects, you are ready to automate the deployment of our Android application. To do so, you can choose an Android specific action - in this case gradle. As the name suggests, Gradle is an action that allows you to achieve similar results as with Android Gradle used standalone.

Our lane uses gradle action to first clean the build folder, and then assemble the APK with signature based on passed params.

Part of the android/fastlane/Fastfile that defines Android lane, named build

You should be able to run lane build by implementing:

This should produce a signed Android apk.

<p-bg-col>Note: Don’t forget to set environment variables to access the keystore. These are RELEASE_STORE_PASSWORD and RELEASE_KEY_PASSWORD; they have been set in the example presented above.<p-bg-col>

Setting up fastlane on iOS

With Android build being automated, you’re ready to move to iOS now. As we discussed earlier, iOS is a bit more complex due to the certification and provisioning profiles. They were designed by Apple to increase the security. Fortunately, fastlane ships with a few dedicated actions that help us overcome these complexities.

You can start with the match action. It helps in managing and distributing iOS certificates and provisioning profiles among your team members. You can read about the idea behind match in the code signing guide concept. Simply put, match takes care of setting up your device in a way that it can successfully build an application that will be validated and accepted by the Apple servers.

Before you move any further, make sure that your init matches your project. It will generate the required certificates and store them in a central repository where your team and other automation tools can fetch them.

Another action that you could use apart from match is gym. Gym is similar to Gradle action in a way that it actually performs the build of your application. To do so, it uses the previously fetched certificates and signs settings from match.

Part of ios/fastlane/Fastfile where iOS lane is defined

You should be able to run lane build by running the same command as for Android:

This should produce an iOS application now too.

Deploying the binaries

Now that you have automated the build, you are able to automate the last part of the process - the deployment itself. To do so, you could use App Center, as discussed earlier in this guide.

<p-bg-col>Note: You have to create an account in the App Center, apps for Android and iOS in the dashboard and generate access tokens for each one of them. You will also need a special Fastlane plugin that brings an appropriate action to your toolbelt. To do so, run `fastlane add_plugin appcenter.`<p-bg-col>

Once you are done with configuring your projects, you are ready to proceed with writing the lane that will package the produced binaries and upload them to the App Center.

Part of ios/fastlane/Fastfile with upload lane

That’s it! Now it is time to deploy the app by executing deploy lane from your local machine.

Integrating with CircleCI

Using all these commands, you are able to build and distribute the app locally. Now, you can configure your CI server so it does the same on every commit to master. To do so, you will use CircleCI – the provider we have been using throughout this guide.

Running fastlane on CI server usually requires some additional setup. Refer to the official documentation to better understand the difference between settings in local and CI environments.

To deploy an application from CircleCI, you can configure a dedicated workflow that will focus on building and deploying the application. It will contain a single job, called deploy_ios, which will execute our fastlane command.

Part of CircleCI configuration that executes Fastlane build lane

Pipeline for the Android will look quite similar. The main difference would be the executor. Instead of a macOS one, a docker `reactnativecommunity/react-native-android` image should be used.

<p-bg-col>Note: This is just a sample usage within CircleCI. In your case, it may make more sense to define filters and dependencies on other jobs to ensure the deploy_ios is run in the right point in time.<p-bg-col>

You can modify or parametrize the presented lanes to use them for other kinds of deploys, for instance for the platform-specific App Store. To learn the details of such advanced use cases, get familiar with the official fastlane documentation.

Benefit: Short feedback loop along with nightly or weekly builds let you verify features faster and ship critical bugs more often.

With automated deployment you no longer waste your time for manual builds and sending the artifacts to test devices or app stores. Your stakeholders are able to verify features faster and shorten the feedback loop even further. With regular builds you will be able to catch or ship fixes to any critical bugs with ease.

Author:
Mike Grabowski
Co-founder & CTO of Callstack. Mike is a React Native core contributor and author of many libraries. When he isn't working, he is on a race track.
arrow icon
MORE posts from this author
Author:
Jakub Mazurek
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.