Working with environment variables in AppCenter

The mobile stack we use in our projects at Idopter Labs counts with a few preferred practices, preferences and services that work well with React Native.

These choices allow us to efficiently run builds and deploy test releases by simply pushing code to a repository. One of the services we use is AppCenter, which we count on to do a lot of the heavy lifting for building, distributing and monitoring our mobile apps.

In this post we want to share how we work with environment variables in AppCenter.

Environment variables help separate configuration options which are likely to change between deployment environments (i.e. development, staging, production). This is a practice widely adopted across the board, which The Twelve-Factor App helped document and bring more awareness to in the SaaS development community back in 2011.

The first step to using environment variables in most applications is to create a .env file. One way to work with a .env file in a React Native application involves using react-native-dotenv to automatically load this file and export its variables for use inside of the application. Here’s an example of reading the variable SOME_API_KEY from a .env file:

import { SOME_API_KEY } from "react-native-dotenv";

The .env file read on the previous example might look something like this:

SOME_API_KEY=some-api-key-value

The problem is that it is considered a bad practice to include sensitive information in the source code repository, such as passwords and access keys. In other words, the .env file shouldn’t be checked into version control with the actual configuration options used in a particular environment.

If this is the case, then the next question becomes, “How can we properly populate and read environment variables in AppCenter so that it builds production ready artifacts ?”

We can do this in two steps:

1- Define environment variables in the project’s build page in AppCenter.

2- Use a custom build script to dynamically create a .env file before the build starts.

To define environment variables for a project in AppCenter, we use this section from the build page in AppCenter:

In order to read these variables and dynamically create a .env file to be used by AppCenter during the build, we create a file at the root of the project named appcenter-pre-build.sh — this file is invoked by AppCenter right before the build starts to run.

Inside this file, we include the following code :

#!/bin/bashcd ${APPCENTER_SOURCE_DIRECTORY}echo “BASE_URL=${BASE_URL}” > .env
echo “FAQ_URL=${FAQ_URL}” >> .env
echo “SOME_API_KEY=${INPUT_FROM_FORM}” >> .env

Notice how this file is essentially re-exporting variables exported by AppCenter through the form we just saw. Since it doesn’t contain any sensitive information, the appcenter-prebuild.sh file can and should be checked into the code repository.

That’s it! In two easy steps, we can leverage AppCenter’s build scripts to provide environment variables to React Native applications.

Hope this helps! ✌️

‍