Automating React Native apps on Bitrise? Sure thing! Let's see how! 🤖
- Log in to Bitrise and click +Add new app on your Dashboard!
- Connect your repository from your connected source code provider or add it manually.
- Setup repository access (See DevCenter for detailed explanation!)
- Validation setup: choose a branch for our scanner, this will help automation. How about a cuppa coffee while we are scanning your app?
- Project build configuration: our scanner will most likely have chosen React Native for your app. Yay! :) Select Scheme name!
- For React Native projects, you should see React Native as the selected project type. If the scanner fails and the project type is not selected automatically, you can configure your project manually. You can see that Android is automatically selected in The root directory of an Android app.
- If your project consist of only one module, that module will be automatically selected for Module. If your project contains more than one module, you can pick a module, but we recommend the main one!
- In Select variant for building field, select a variant that suits your project. Pick Select All Variants to build all variants. Pick debug or release if you wish to generate an APK or an .ipa file.
- Select your Xcode project or Xcode Workspace path in the Project (or Workspace) path field. *Select Scheme name. The scanner validation will fail if you do not have a SHARED scheme in your project. You can still point Bitrise manually to your Xcode scheme but if it’s shared, we automatically detect it for you. Read more about schemes and the possible issues with them!.
- In Select ipa export method, select the export method of your .ipa file: ad-hoc, app-store, development or enterprise method.
- Selected project build configuration: review and Confirm settings!
- Webhook setup: register a Webhook so that Bitrise can automatically start a build every time you push code into your repository. For example with slackbot: <ImageHere>
- Observe your first build! Well done! ✨
- After your first green build, now you are ready to learn some more about deployment, click on the blue box! For even more info, go to the DevCenter!
A React Native app can consists of two projects, an Android and an iOS - both must be properly code signed. If you click on the Code Signing tab of your project's Workflow Editor, all iOS and Android code signing fields are displayed in one page for you. Let's see the process step by step!
-
Select the
deploy
workflow at theWORKFLOW
dropdown menu in the top left corner of your apps' Workflow Editor. -
Go to the
Code Signing
tab. -
Drag-and-drop your keystore file to the
ANDROID KEYSTORE FILE
field. -
Fill out the
Keystore password
,Keystore alias
, andPrivate key password
fields and clickSave metadata
.You should have these already at hand as these are included in your keystore file which is generated in Android Studio prior to uploading your app to Bitrise. For more information on keystore file, click here. With this information added to your
Code Signing
tab, ourSign APK step
(by default included in your Android deploy workflow) will take care of signing your APK so that it’s ready for distribution!
More information on Android code signing" content=" Head over to our Android code signing guide to learn more about your code signing options!
The Android chunk of code signing is done!
Code signing your iOS project depends on what you wish to do with the exported .ipa file. In this section, we describe how to code sign your project if you wish to install and test it on internal testers' registered devices. You will need an .ipa file exported with the development
export method to share your project with testers.
If you wish to upload your .ipa file to an app store, check out this section!
The example procedure described here uses manual provisioning, with the Certificate and profile installe
Step. However, Bitrise also supports automatic provisioning but it is not in the scope of this guide.
You will need:
- the automatically created
deploy
workflow - an iOS Development certificate (a .p12 certificate file)
- a Development type Provisioning Profile
-
Set the code signing type of your project in Xcode to either manual or automatic (Xcode managed), and generate an .ipa file locally.
-
Collect and upload the code signing files with the codesigndoc tool.
The tool can also upload your code signing files to Bitrise - we recommend doing so! Otherwise, upload them manually: enter the Workflow Editor and select the
Code signing
tab, then upload the files in their respective fields. -
Go to your app’s Workflow Editor, and select the
deploy
workflow in theWORKFLOW
dropdown menu in the top left corner. -
Check that you have the
Certificate and profile installer
Step in your workflow. It must be before theXcode Archive & Export for iOS
Step (you can have other Steps between the two, likeXcode Test for iOS
). -
Check the
Select method for export
input of theXcode Archive & Export for iOS
Step. By default, it should be the$BITRISE_EXPORT_METHOD
environment variable. This variable stores the export method you selected when creating the app. If you selecteddevelopment
back then, you don’t need to change the input. Otherwise, manually set it todevelopment
.
If you uploaded the correct code signing files, the Certificate and profile installer
Step should install your code signing files and the Xcode Archive & Export for iOS
Step should export an .ipa file with the development export method. If you have the Deploy to Bitrise.io
Step in your workflow, you can find the .ipa file on the APPS & ARTIFACTS
tab of the Build's page.
iOS code signing is often not this simple - read more about how iOS code signing works on Bitrise
If you set up your code signing files and created an .ipa file for your internal testers, it is time to involve external testers and then to publish your iOS app to the App Store.
To deploy to Testflight and to the App Store, you will need more code signing files:
- an iOS Distribution Certificate
- an App Store type Provisioning Profile
-
On your local machine, set up App Store code signing for your project in Xcode, and export an App Store .ipa file. If this fails locally, it will definitely fail on Bitrise, too!
-
Collect and upload the code signing files with the codesigndoc tool.
-
Go to the app’s Workflow Editor and create a new workflow: click the
+ Workflow
button, enter the name of your new workflow and in the BASED ON dropdown menu, selectdeploy
. This way the new workflow will be a copy of the basicdeploy
workflow. -
Set the
Select method for export
input of theXcode Archive & Export for iOS
Step toapp-store
.If you wish to distribute your app to external testers without uploading the app to Testflight, select
ad-hoc
method and make sure you have theDeploy to Bitrise.io
step in your workflow.
You can use React Native's built in testing method, called jest
. Add another Run nmp command
step to your workflow, and type test
in the npm command with arguments to run
input field.
The Deploy to bitrise.io
step uploads all the artifacts related to your build into the APPS & ARTIFACTS tab on your Build’s page.
You can share the generated APK/.ipa file with your team members using the build’s URL. You can also notify user groups or individual users that your APK/.ipa file has been built.
- Go to the
Deploy to bitrise.io
step. - In the
Notify: User Roles
, add the role so that only those get notified who have been granted with this role. Or fill out theNotify: Emails
field with email addresses of the users you want to notify. Make sure you set those email addresses as secret env vars! These details can be also modified underNotifications
if you click theeye
icon next to your generated APK/.ipa file in theAPPS & ARTIFACTS
tab.
If you wish to deploy your iOS app, follow the steps in Code sign your iOS project for deployment.
Have you exported an app-store
.ipa file yet" content=" Make sure that you have exported an app-store
.ipa file before starting the deployment procedure to a native marketplace!
-
Add the
Deploy to iTunes Connect - Application Loader
Step to your workflow, after theXcode Archive & Export for iOS
Step but preferably before theDeploy to Bitrise.io
Step. -
Provide your Apple credentials in the
Deploy to iTunes Connect - Application Loader
Step.The Step will need your:
- Apple ID
- password or, if you use two-factor authentication on iTunes Connect, your application password.
Don’t worry, the password will not be visible in the logs or exposed - that’s why it is marked SENSITIVE.
-
If everything went well, you should see your app on Testflight. From there, you can distribute it to external testers or release it to the App Store.
Android code signing" content=" Make sure that you have uploaded the keystore file to the ANDROID KEYSTORE FILE
field!
-
Make sure you are in sync with Google Play Store! Learn how to
-
In your Bitrise
Dashboard
, go toCode Signing
tab and upload the service account JSON key into theGENERIC FILE STORAGE.
-
Copy the env key which stores your uploaded file’s url.
For example:
BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL
-
Add the
Google Play Deploy
step after theSign APK
step in your deploy workflow. -
Fill out the required input fields as follows:
Service Account JSON key file path
: This field can accept a remote URL so you have to provide the environment variable which contains your uploaded service account JSON key. For example:$BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL
Package name
: the package name of your Android appTrack
: the track where you want to deploy your APK (alpha/beta/rollout/production)
And that’s it! Start a build and release your Android app to the app store of your choice.
A Bitrise workflow is a collection of Steps. When a build of an app is run, the steps will be executed in the order that is defined in the workflow. Workflows can be created, defined and modified in two ways:
- Using the graphical Workflow Editor on bitrise.io
- Directly editing the bitrise.yml file of your project Ultimately, both methods modify the bitrise.yml file - the Workflow Editor is simply a friendlier way of doing so!
By default, a single build is a single workflow. But it’s also possible to chain workflows together so they run in succession, as well as to trigger multiple workflows to run simultaneously.
When you add a new app on bitrise.io, two workflows are created automatically. These are the primary and the deploy workflows. By default, every code change in your project’s repository triggers the primary workflow if the required webhook has been set up.
Triggers can be configured so that any other workflow (including deploy) is automatically triggered when certain code events happen. For more information, read some more about build triggers.
It’s very simple to create your own workflow with the Workflow Editor. You can create new workflows based on any of the existing ones, or you can simply create an empty workflow and add the steps yourself.
If, for example, you create a workflow based on your primary
one, it means that it will be created with the exact same Steps as the primary
workflow.
- Click the app’s
Workflow
tab. Note that you cannot leave the Workflow editor without either saving or discarding any changes you made. - Click
+ Workflow
- Select the workflow you want to use as the basis for the new one. Alternatively, choose the
Empty workflow
option to create an empty workflow
- Add the Steps you need to your workflow. Click the
+
symbol between two Steps to insert a Step at that position. Remove Steps you do not need by clicking on the Step and clicking the little trash bin symbol - Click
Save
in the top right corner
You can set up multiple workflows to run in succession. The order of these workflows can be rearranged, new workflows can be added to the “chain” and existing workflows can be removed from it at any time.
- Click the app’s
Workflow
tab. Note that you cannot leave the Workflow editor without either saving or discarding any changes you made. - Open the
WORKFLOW
menu on the left and select a workflow. The default is theprimary
workflow. You can chain workflows before and after the selected workflow. - Click
Add Workflow
before to chain a workflow before the currently selected one or clickAdd Workflow
after to chain a workflow after the currently selected one. - Click
Save
in the top right corner.
And that's all! This tutorial is based on DevCenter and Bitrise Blog. Happy Coding!