Skip to content

Instantly share code, notes, and snippets.

@hungvu193
Last active September 20, 2023 12:38
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save hungvu193/81b3e8e27bd1377547ad596ca657f801 to your computer and use it in GitHub Desktop.
Save hungvu193/81b3e8e27bd1377547ad596ca657f801 to your computer and use it in GitHub Desktop.
How to setup Bitrise.io to run a react native project

Set up a React Native app on Bitrise

Getting Started

Automating React Native apps on Bitrise? Sure thing! Let's see how! 🤖

  1. Log in to Bitrise and click +Add new app on your Dashboard!
  2. Connect your repository from your connected source code provider or add it manually. Connect repo
  3. Setup repository access (See DevCenter for detailed explanation!) Setup repo
  4. Validation setup: choose a branch for our scanner, this will help automation. How about a cuppa coffee while we are scanning your app? scanning
  5. 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. project config
  1. Selected project build configuration: review and Confirm settings! Select build config
  2. Webhook setup: register a Webhook so that Bitrise can automatically start a build every time you push code into your repository. weebhook For example with slackbot: <ImageHere>
  3. Observe your first build! Well done! ✨ firstbuild
  4. 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! devcenter

Code Signing

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!

Sign your Android project

  1. Select the deploy workflow at the WORKFLOW dropdown menu in the top left corner of your apps' Workflow Editor.

  2. Go to the Code Signing tab.

  3. Drag-and-drop your keystore file to the ANDROID KEYSTORE FILE field.

  4. Fill out the Keystore passwordKeystore alias, and Private key password fields and click Save 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, our Sign 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!

Sign and export your iOS project for testing

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)
  • Development type Provisioning Profile
  1. Set the code signing type of your project in Xcode to either manual or automatic (Xcode managed), and generate an .ipa file locally.

  2. 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.

  3. Go to your app’s Workflow Editor, and select the deploy workflow in the WORKFLOW dropdown menu in the top left corner.

  4. Check that you have the Certificate and profile installer Step in your workflow. It must be before the Xcode Archive & Export for iOS Step (you can have other Steps between the two, like Xcode Test for iOS).

  5. Check the Select method for export input of the Xcode 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 selected development back then, you don’t need to change the input. Otherwise, manually set it to development.

    Export method env var

  6. Start a build.

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.ioStep 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

Sign and export your iOS project for deployment

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
  1. 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!

  2. Collect and upload the code signing files with the codesigndoc tool.

  3. 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, select deploy. This way the new workflow will be a copy of the basic deploy workflow.

  4. Set the Select method for export input of the Xcode Archive & Export for iOS Step to app-store.

    App store export

    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 the Deploy to Bitrise.io step in your workflow.

Test your project

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.

Deploy to Bitrise

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.

  1. Go to the Deploy to bitrise.io step.
  2. In the Notify: User Roles, add the role so that only those get notified who have been granted with this role. Or fill out the Notify: 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 under Notifications if you click the eye icon next to your generated APK/.ipa file in the APPS & ARTIFACTS tab.

Deploy to an app store

If you wish to deploy your iOS app, follow the steps in Code sign your iOS project for deployment.

Deploy your iOS app to Testflight and iTunes Connect

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!

  1. Add the Deploy to iTunes Connect - Application Loader Step to your workflow, after the Xcode Archive & Export for iOS Step but preferably before the Deploy to Bitrise.io Step.

  2. 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.

  3. Start a build.

    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.

Deploy your Android app to Google Play Store

Android code signing" content=" Make sure that you have uploaded the keystore file to the ANDROID KEYSTORE FILE field!

  1. Make sure you are in sync with Google Play Store! Learn how to

  2. In your Bitrise Dashboard, go to Code Signing tab and upload the service account JSON key into the GENERIC FILE STORAGE.

  3. Copy the env key which stores your uploaded file’s url.

    For example: BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL

  4. Add the Google Play Deploy step after the Sign APK step in your deploy workflow.

  5. 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 app
    • Track: 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.

Workflows

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.

Default Workflows

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.

Creating your own workflow

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.

  1. Click the app’s Workflow tab. Note that you cannot leave the Workflow editor without either saving or discarding any changes you made.
  2. Click + Workflow workflow
  3. 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

emptywf

  1. 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
  2. Click Save in the top right corner

save

Chaining workflows together

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.

  1. Click the app’s Workflow tab. Note that you cannot leave the Workflow editor without either saving or discarding any changes you made.
  2. Open the WORKFLOW menu on the left and select a workflow. The default is the primary workflow. You can chain workflows before and after the selected workflow. wk
  3. Click Add Workflow before to chain a workflow before the currently selected one or click Add Workflow after to chain a workflow after the currently selected one. addwf
  4. Click Save in the top right corner.

And that's all! This tutorial is based on DevCenter and Bitrise Blog. Happy Coding!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment