React Native

Learn how React Native deployment works with Fastlane

Read our previous article on the subject : Deploy your React Native App to the store automatically with Fastlane

A problem that we noticed at BAM is that most of the newcomers have no clue how deployment works. This leads to a big time loss when one of them has to setup a project deployment or fix it.

In this article, we will learn the basics of Android and iOS deployment at BAM, and how to configure Fastlane to do most of the work for us! We will first explain how the deployment works on Android and iOS and the how to deploy with Fastlane and a project generated by our generator.

Before you can start

If you already know the Fastlane vocabulary,  you can move to the prerequisites.

Otherwise, here's a glossary of the mobile deployment/Fastlane's vocabulary you will need reading this article:

  • First Fastlane: it's a tool that allows us to release our application in staging and production. It provides many useful tools, such as:
  • produce creates your iOS application identifier on both the Apple Developer Portal and iTunes Connect (usually only used once when you create your app);
  • match will make your iOS development process so much easier. It synchronizes your certificates and provisioning profiles across your team. It allows you to share one code signing identity across your development team. Match also automatically repairs broken and expired credentials and update them on the repo. Each time you try to deploy, match will look at the certificates and profiles on the repo, will create/update them if they do not exist/are expired, and will download them locally so you can use them. As the number of certificates is limited on each project, before match we had to share our certificates between developers with an USB key! ;
  • Gym builds and signs your iOS apps;
  • And others you can find on Fastlane's documentation...
  • Gradle is an open source build automation. It allows you to build project in various languages including Java and manages depencies;
  • HockeyApp is a platform to host your application (applestore like). We use it for our staging's application to make them available for test for our clients before deploy it on the stores.

Prerequisites

Have an Apple developer and a Google play account fees paid, and an application created on both of them :)

 

 How does deployment works?

Let's start with a little explanation of how deployment works for Android and iOS

Android

Android deployment is quite simple.

If you used a generator such with ++code>react-native init <ProjectName>++/code>, you wont have much to configure to build your application for deployement. Gradle will take care of the building part.

The only thing you will need to configure is the signing part. All the signing process is handled by a ++code>keystore++/code> (usually in ++code>android/app/<appName>.keystore++/code>). It's a secret that will sign your application for the store. It's only generated once when you first build the app (and deploy it), so DON'T LOSE IT (If your repo is private, you should commit it). You can follow this Facebook tutorial to sign your app manually, or go to the "How does it work with our generator?" part to do it automatically

iOS

It's a bit more complicated for iOS, but most of it is handled by Fastlane

You will need a few things:

  • A ++code>bundle ID++/code> (or ++code>app ID++/code>) that usually looks like ++code>com.companyName.<projectName>.<environment>++/code> that will identify your application
  • An ++code>appName++/code>
  • ++code>capabilities/entitlements++/code> that defines what your application can or can't do: for example In-App Purchase or Push Notifications;
  • ++code>A certificate++/code> that identifies you as an authorized developer;
  • ++code>A provisioning profile++/code> which defines the ++code>bundle ID++/code> + ++code>the certificate++/code> + ++code>ids of the devices++/code> on which the app can run (we don't manually define the devices allowed as we use an inHouse account that allows us to run the application on any device that accepts BAM as a known developer)

With fastlane (and match), the certificate and the provisioning profile are both managed by a private certificate git repo.

Here is the work flow of a deployment with Fastlane for iOS:

iosDeploymentDiagram.png
 

How does it work with our generator?

You can automize previous steps with our generator that uses fastlane.

First, you will need to install our generator (++code>npm install -g yo generator-rn-toolbox++/code>), and then install Fastlane and our configuration files on an existing running React Native project with ++code>yo rn-toolbox:fastlane-setup++/code> and ++code>yo rn-toolbox:fastlane-env++/code> to create a new fastlane environment.

It will create a fastlane directory on your project root directory, containing 2 files:

fastlane/.env.environment:

GLOBAL

ENV= 'environment name'
DEPLOYMENT_PLATFORM='appStore for production' or 'hockeyapp for staging'

IOS

IOS_PROJECT_PATH='ios'
IOS_APP_NAME='application name'
IOS_VERSION='version'
IOS_VERSION_BUILD_NUMBER='build number'
IOS_PROJECT_NAME='project name'
IOS_APP_ID='the bundle id explained below'
IOS_TEAM_ID='your team id' # can be found here https://developer.apple.com/account/#/overview/XXXXXXX
IOS_USER_ID='your apple developer id' # the mail you use to connect yourself to apple developer
IOS_PLIST_PATH='project name/Info.plist'
IOS_ITC_TEAM_NAME='your itunes connect team name' # not necessary

IOS MATCH

MATCH_GIT_URL='url of your private certificate git repo, used for match (explained below)'
MATCH_GIT_BRANCH='master'
MATCH_TYPE='appstore' or 'enterprise' depending on your apple developer account subscription
MATCH_FORCE_ENTERPRISE='1' # only if your MATCH_TYPE is 'enterprise'
MATCH_READONLY='true'


IOS GYM


GYM_SCHEME='usually your project name'
GYM_OUTPUT_DIRECTORY='dist'
GYM_OUTPUT_NAME='app.ipa'

IOS HOCKEY APP

IOS_IPA_PATH='./dist/app.ipa'


ANDROID PROJECT

ANDROID_PROJECT_DIR='android'
ANDROID_APK_PATH='android/app/build/outputs/apk/app-release.apk'
ANDROID_VERSION_CODE='build number'
ANDROID_VERSION_NAME='version'
GRADLE_APP_IDENTIFIER='your app identifier for the play store'
GRADLE_APP_NAME='your project name'
GRADLE_KEYSTORE='your keystore name' # you will need one for each envionment you deploy on. Should look like appName.environment.keystore
GRADLE_KEYSTORE_ALIAS='your project name'

fastlane/.env.<environment>.secret 

GRADLE_KEYSTORE_PASSWORD='whatever you want'
GRADLE_KEYSTORE_ALIAS_PASSWORD='whatever you want'
FL_HOCKEY_API_TOKEN='hockey app api token' # only for deploying on mobile center/hockeyapp

And that's all!

Once it's properly configured, you can deploy on iOS with ++code>bundle exec fastlane ios deploy --env=<environment>++/code> and on Android with bundle exec fastlane android deploy --env=<environment>.

Common troubleshooting

Most of your issues can be fixed by updating your Fastlane ++code>bundle update fastlane++/code>

When your issue is related to your provisioning profile, feel free to delete the provisioning profile on your certificate repo, as it will be regenerated properly on your next deploy.

More

Développeur mobile ?

Rejoins nos équipes