Multi Environments Distribution with React Native using Azure AppCenter Part.2 Configuring AppCenter for iOS

Multi Environments Distribution with React Native using Azure AppCenter

Part.1 Configuring react-native-config

Part.2 Configuring AppCenter fo iOS: This article

Today, we are going to explore deployment process of Azure AppCenter for iOS with .env environments.

Let’s start with configuring development environment.

Azure AppCenter Welcome page

To configure Azure AppCenter for iOS, you need certificate and provisioning profile from Apple developer center.

https://developer.apple.com/account/resources/certificates/list

Go ahead and grab your certificate and provisioning profile.

If you have them already, let’s get started.

Configure AppCenter for iOS

Let’s start with dev environment.

Click “Add new app” and fill in the form as below.

App name: {your_project_name}-INT

Release Type: Alpha or Beta according to your distribution stage.

Owner: You or your organization(if you have one)

OS: iOS

Platform: React Native

Add new app for iOS

After your first app on AppCenter created, follow below instructions to add appcenter-analytics and appcenter-crashes packages. Note that highlighted AppSecret will be used for analytics and crash data for this app.

Getting started

Now let’s move on to Build configuration.

You can connect your repository to build pipeline here.

Connect to repo

Connect “development” branch to Azure AppCenter.

development branch connected

Click the connected branch. When below screen shows up, Click Configure build.

Configure build

Build configuration

Change Shared Scheme:

In this article, I’ve prepared cloudhospital.dev for development, cloudhospital.stg for staging, and cloudhospital for production. If you haven’t created schemes for iOS, please refer to iOS Configurations section of Part.1 Configuring react-native-config

Enable Environment variables:

Add .env variables with “RN_” prefix.

Here I’m just adding RN_stage only for demo purpose.

Add Environment variables

Add appcenter-pre-build.sh file to project’s root folder.

#!/usr/bin/env bash
# Creates an .env from ENV variables for use with react-native-config
ENV_WHITELIST=${ENV_WHITELIST:-"^RN_"}
printf "Creating an .env file with the following whitelist:\n"
printf "%s\n" $ENV_WHITELIST
set | egrep -e $ENV_WHITELIST | sed 's/^RN_//g' > .env.$APPCENTER_BRANCH
printf "\n.env.$APPCENTER_BRANCH created with contents:\n\n"
cat ".env.$APPCENTER_BRANCH"

This will create .env.{branchName} on build process.

With above script and configured setting, it will create .env.development file with below content.

stage=development

Because we set our development scheme to pickup environment variables from .env.development(refer to adding new run script action of iOS Configurations from Part. 1), the build will use this file for environment variables.

New run script action of Part. 1

Enable Sign builds:

Get provisioning profile and certificate from developer.apple.com and upload to AppCenter.

Sign builds

Enable Distribute builds:

Select distribute group for development distribution.

Select distribute group.

We are all set. Now click Save & Build and give a good 15~20 minutes to see the result.

Build configuration completed.

Build output:

Note that our appcenter-pre-build.sh has run and created .env.{branchName}.

.env.development in this example.

Build output

When the build completes, your distribution group will get their first notification from App Center Team.

Email notification from App Center

Install app

Invited user will have to register their devices in order to use this app. Please refer to Device registration section of App Center document.

Development environment

Note that Stage:development is displayed under Step One section which means our .env environment variable applied as we intended.

You can repeat this for other environment as many as you want.