Bitrise

Create a new app in Bitrise and set up a build pipeline

Bitrise is used to build and deploy React Native apps to a bitrise install page, TestFlight, the App Store and the Play Store.

Create a new app

Make sure you've cloned the mobile project starter and pushed to a new repo

1. Go to https://app.bitrise.io/dashboard/ and click Add New App

Add a new app using the web UI

2. Select the Chelsea Apps organisation as the owner, and set the access to private

Select the owner and privacy

3. Select Bitbucket as the platform and find the repository containing the frontend starter

4. Click No, auto-add SSH key

5. Enter the branch name (master)

6. Wait for bitbucket to scan the repo and detect the correct build config

7. Select the defaults for the Android folder, and enter debug or release as the variant

8. Select any scheme for iOS (you'll change this later)

9. Select app-store for the iOS distribution method

10. Skip webhook registration

Apple Service Connection

App Store Connect

To allow Bitrise to access the Apple developer account, you need to generate an API key in App Store Connect. Go to Users and Access > Keys and generate a new key.

You may need the Account Owner the request access for API keys. Only the owner can do this

Download the API key (you may need to refresh), and copy the Issuer ID and Key ID.

Bitrise

Go to your personal Bitrise profile, and click Apple Service Account on the sidebar. Add a new account for the project.

Apple Service connections are tied to your user account

Paste in the Issuer ID, Key ID, and then upload the key you downloaded from App Store Connect.

You can get these details from the Keys page in App Store Connect

You can now go back to the App page on Bitrise, and add the Apple connection under the Team tab

Select the connection for this team

Use the API key authentication not Apple ID, as that is deprecated

Workflow

A default workflow is included in the ChelseaAppsStarter project template, under the bitrise.yml file. In the Workflow Editor > bitrise.yml, select the option to store the workflow file in the app repository.

Store in repo allows you to use the default workflow

You'll need to rename the project to match the project and scheme names - see the Renaming section in the starter project Readme.

This default workflow includes the following workflows:

Development

Deploy a Development version of the app to Bitrise as an IPA/APK distributable, using the Development scheme.

Any branch can be deployed using this workflow.

Staging

Deploy a Beta version of the app to Testflight, using the Staging scheme

Use the staging branch when building with this workflow.

Production

Deploy a Live version of the app to Testflight & the App Store, using the Production scheme

Use the master branch when building with this workflow.

It also includes a series of sub-workflows that are utilised by the above workflows:

Workflow	Description
deploy_ipa	Deploy IPA distributable to Bitrise's hosted platform. Send a slack message to a channel about the deployment.
deploy_itunes_connect	Upload a build to iTunes Connect
install	Clone repo and install npm packages
ios_dev	Install pods Bump build number Auto provision code signing certificates Build app (Development scheme)
ios_production	Install pods Bump build number Auto provision code signing certificates Build app (Production scheme)
ios_staging	Install pods Bump build number Auto provision code signing certificates Build app (Staging scheme)

Code Signing and Provisioning Profiles

Before provisioning and building the app, you'll need to upload a provisioning profile and code signing certificate. codesigndoc makes this easy.

You'll need to download and manually install the codesigndoc tool. Follow the instructions here

You'll need to have certificates installed locally to run codesigndoc:

Certificates

1. From the root of the backend starter directory, run

$ ~/codesigndoc scan xcode --certs-only

2. Select the project from the Schemes listed

Enter the number corresponding with your Scheme

3. Select development as the first ipa export method, and enter yes to collect another

4. Select app-store as the second method, and enter NO to complete collection

Error: 🚨 We couldn't find any certificate for the app-store export method

This error means codesigndoc tool cannot find the certificate locally for that export method. Sometimes Verifying the build can help fix this.

Otherwise you can skip codesigndoc and upload the certificates manually under App > Workflow > Code Signing > CODE SIGNING CERTIFICATES.

Creating a build workflow

While you can use bitrise for testing, we mainly use it for building and deployment. Break the build pipeline down into 2 primary workflows, and multiple sub workflows:

1. Staging (deploy a Beta app using the Staging provisioning profile to Testflight)

2. Production (deploy a Production app using the Production profile to Testflight)

These two workflows combine the following subworkflows together:

• iOS

Notify

Send a slack notification with a link to the download page.

Add the Send a Slack message step to a new workflow, after the iOS and Android workflows.

Uncheck Run if previous Step failed to stop notifications for failed builds, or set up a custom build failed notification

Input	Value
Slack Webhook	Generate a new Incoming Webhook in the Slack app admin panel for the Chelsea application. Set that to a new secret variable $SLACK_WEBHOOK and use that in the Slack Webhook URL input.
Target Slack Channel	Set this to the name of the channel used in the Incoming Webhook, e.g. #uplevyl.
Text of the message	:rocket: Build completed!
Emoji to use as the icon for the message	N/A
Message icon	N/A
The bot's username for the message	Name of the project e.g. Uplevyl
Message colour	#3bc3a3
An optional text that appears above the attachment block	*New app version available*
A small text used to display the author's name	$GIT_CLONE_COMMIT_AUTHOR_NAME
The title of the attachment	$GIT_CLONE_COMMIT_MESSAGE_SUBJECT
Text is the main text of the attachment	$BITRISE_GIT_MESSAGE
Footer adds some brief text as footer	Chelsea Apps
Renders a small icon beside the footer text	N/A
A list of buttons attached to the message as link buttons	Android|${ANDROID_INSTALL_PAGE} iOS|${IOS_INSTALL_PAGE}