Deploying React Native apps is labor-intensive, remember that there are two platforms to handle. Additionally, a necessary element of the entire application development process is enabling internal testers and potential customers to test the application quickly. This saves development hours and allows you to deploy applications to the market quicker.
For mobile applications, Bitrise is a great choice. This continuous integration and deployment platform enables automated deployment workflows.
In this post, I will show you how to add a React Native project to Bitrise, and also how to deploy this app for Android and iOS.
How to deploy React Native apps using Bitrise
Table of contents:
- Bitrise for React Native
- Fastlane
- Setting up a React Native app
- Android deploy workflow
- Android workflow
- iOS deploy workflow
- Building iOS
- Some useful tips
- Conclusion
Bitrise for React Native apps
Bitrise provides many steps and workflows which make it possible to create custom builds and deployments. At first, it may seem intimidating, but intuitive UI helps to overcome this barrier. Working with this tool helps to be more organized, after each deployment you get an email with a new iOS and Android app version. If you want you can set additional Slack notifications.
Fortunately, Bitrise has really good support for React Native. After adding the application, CI recognizes the project type and adds sample schemes and builds. In the beginning, we have two workflow suggestions: deploy and primary. There are perfect examples to follow.
Fastlane
Bitrise is not the only solution for mobile applications. Fastlane also lets you automate your development and deployment process. It is an open-source platform, also dedicated to React Native projects specifically. I mentioned this because it’s good to know not only one tool for automating projects.
In our projects starter, we have been set up both solutions: Bitrise and Fastline. Of course, they do the same job but I prefer Bitrise.
Bitrise is really easy to set up — especially for more complicated things like adding keystore file, provisioning profile or certificates are super easy. Documentation is perfectly prepared for that, in the Fastlane option, I think it should be better described. In the case of Fastlane, we mainly rely on console commands what is mutch less intuitive that great prepared Bitrise platform UI. Adding and removing particular workflow steps is simple, fast and fun with Bitrise.
And again, Bitrise set up is less time consuming than Fastline.
Setting up a React Native app
It is really very simple. I will present it in a few steps.
- Log in to your Bitrise and go to the Dashboard, then click “Add new app” button.
- Choose your account and set the privacy of the app (private or public option).
- Connect with the app source code. You can connect with your repository using providers (GitHub, GitLab, Bitbucket) or add it manually.
- Set up repository access. You can add an additional private repository if needed.
- Validation setup. In this step, you have to specify a branch for a scan. Here Bitrise validating project configurations, it’s a fast and reliable way to start.
- Project build configuration. After scanning the selecting scheme is needed — the actual scheme of your project.
- Confirm build configuration.
- Webhook setup ensures automatic app builds every time when you will push the code into a repository that you entered to scan. (for example “master”)
- Your first build is creating now!
Android deploy workflow
Before selecting workflow steps and clicking the Start Build button, we have to remember about the most important thing in android deployment. How to upload a keystore file to Bitrise and keep it private and safe (remember that you’ll need a keystore password and keystore alias). We can do it in two ways.
First in the Bitrise Workflow editor, under the Code Signing tab we should find ANDROID KEYSTORE FILE area. Then click or drop your file on the upload file field. After that fill inputs with Keystore password, Keystore alias, and Private key password.
After that, we should generate a URL variable which is a source patch to our uploaded files. In your JSON file, find the private_key_id that should be paste in File Storage ID to enable uploading function.
As I mentioned before, Bitrise provides two first workflows: primary and deploy. Primary is a basic version and deploy contains the whole building and deploying process for iOS and Android. In our projects, we decided to split iOS and Android workflows for more flexibility.
Android workflow
- Active SSH key. Set up the SSH key to use with the current workflow.
- Clone Repository. In this step, Bitrise cloning source code repository from a particular branch.
- Node Dependencies. We are using a yarn command.
- Android Build. Here Bitrise building Android project with gradle, we getting APK file.
- Upload to Google Play. APK that was generated in the previous step is uploading to Google Play.
- Deploy to Bitrise.io. In this step, Bitrise collects artifacts (IPA – iOS, APK – Android) from the whole workflow and places them in a specified deploy directory. Really great option here is creating a public install page that allows testers and potential customers to install the app on their devices.
iOS deploy workflow
In iOS building, necessary to deploy are two things: certificates with private keys and provisioning profile. Using console scripts or xCode we are able to build app on the simulator but it is impossible to build apps and generate IPA files.
Under the same place as in Andoird, in the Workflow editor, select Code Signing and go to PROVISIONING PROFILE and CODE SIGNING IDENTITY sections. Upload particular files.
Building iOS
iOS workflow looks completely the same as in Android until the Android Build step. In this place, we should put a few different functionalities.
- CoocaPods setup. In this step Bitrise uses the pod install command to install your dependencies on the virtual machine. Information about versions are taken from Podfile.lock file or Gemfile.lock file. It is very important to fill input with a patch to Podfile, in the iOS directory. Otherwise Bitrise in this step is making a recursive search for the Podfile in the root of your app’s directory.
- Certificate and profile installer. I mentioned how to add the necessary information earlier. Here in each time are downloaded and installed the Apple code signing certificates (.p12 certificate file) and provisioning profile.
- Xcode Archive and export for iOS. Running Xcode archive command we are getting and exporting .ipa file. In React Native, project is located in ios directory and this path should be entered (ios/espeoCreateReactNativeApp.xcworkspace). This output ipa file in easy way can be installed in the device or upload to App Store Connect.
- Deploy to Bitrise.io. It’s the same step as in Android Bitrise.io deploy. In iOS case, TestFlight is a default option for testing.
Some useful tips
Bitrise is a tool full of possibilities. One of those is making builds and deploys not exactly from the main branch, mainly “master.” You can create builds for each source code branch and even set a time for it. It is very useful for quick testing.
Typically, a production application contains more than one environment to work. Constructing workflows for different environments we can easily set up a patch to make it automatically. In the Workflow editor go to Env Vars and next to your workflow name add environment patch.
With Bitrise at the end of every a deployment flow you are getting an extensive build log. Each step is marked and described very well, you know exactly when and why your build failed.
Conclusion
The process of deploying the application in React Native contains multiple steps for iOS and Android platform, it’s really time-consuming. With Bitrise we are saving almost four hours per week on the testing and development process and we are not alone with it. Many respected companies such as InVision, Mapbox, Google, Foursquare or Runkeeper are building their apps with Bitrise.
As reposted by Bitrise in 2016 they saved 145,516 hours for all those companies altogether. You can read more about if here. Bitrise saves your valuable time, customer’s money and stress, related to super important for development – deploying.
See also:
