Automate Build With App Center

Disclaimer

This post was full of personal preferences, and i'm writing this based on my experience as hybrid mobile (React Native) developer.

Problem

As a mobile developer we are expected to build the apps artifacts (.apk/.ipa). Here was my problem when dealing with build/archiving apps artifacts:

• As the code base grew larger, so does the build time. My current project took almost 15 mins for android and 35 mins for iOS.
• When we are building the artifacts we can't change branch or run our code in simulator. Thus, (i assume) we can't code the new feature or fixing the issues while waiting for our build.
• Building artifacts take a lot of computer resources (at least for iOS).

Those was my biggest problem aside from being noob to setup local environment to build the artifacts 🥲.

And App Center Build is the platform to mitigate those problem.

What's App Center Build ?

"The App Center Build is a service to helps you build Android, iOS, macOS, and UWP apps using a secure cloud infrastructure" - App Center.

Basically App Center Build is a way to build our artifacts on cloud, which solve our problem 🤩.

Advantages of using App Center Build (that i felt):

• It's easy to use, just connect it to our repo and done (for some cases configuration might be needed).
• It build based on branch, so no need to wait until the code merged to master.
• App Center came with a distribution platform as well, which integrated really well with the App Center Build.
• Build configuration can be cloned easily across branch.
• it's free (with limitation though).

How to use App Center Build

Let's use step-by-step example to demonstrate the build process:

1. Create an App Center Account

Here is the link to the App Center Sign Up page click here.

[Optional] I have made a simple React Native Project.

this is a template React Native screen with additional feature to take ENV_TEXT key value from .env and show it in the screen. link to the repo forked it and get along with this example.

2. Create App Center Project

Create the App Center Project for both android and iOS version.

App Project Button:

iOS Build:

Android Build:

3. Connect for repository with the App Center Build!

Click the Build Tab:

Select the repo services, then follow the instruction. List of our repository will be shown. In this case i'll use this

After choosing repository, the App Center will look like this:

4. Setup Build Configuration

Actually, it's a bit impractical to say that we don't need to configure anything but if we just wanna try out it's do able.

From the picture above select the master branch row, and we'll see this:

click "Configure Build" and the Configuration sidebar will appear.

Actually all of the configuration name was already on point but here is some of differences when we build on local:

• Build scripts: it shows what kind of build script that we have added in our repository. App Center Provide a way to run additional script command that corresponding to the build stages read here for more.
  • Note that every time we push a new build script (let says currently we just have pre-build and want to add post build), we need to resave our configuration.
• Build frequency: We can choose to build the apps manually by clicking "build", or build the apps from the branch every time we make a git push. Note that with automatic build, merged MR count as push and will be automatically build.

App Center Build also provide a way to store environment variable in the build configuration.

But the value of this environment variables is a bit different than .env file, it was meant to use in the build script. if we want to convert the App Center environment variable into .env, the repos appcenter-pre-build.sh file already provide the code to make a .env from the App Center environment variable that have start with ENV key.

For Signed with android, I usually do it manually in gradle. But if we want to upload .keystore file and provide the value from App Center Build Configuration this docs provide a great help.

As for the Signed with iOS build, we need to upload Provisioning Profile and Certificate. We could we find it ?

• Provisioning Profile: Open Xcode, under `Signing & Capabilities Tab, there is the provisioning profile, click the "i" logo and popup will appear like the image below.

from the file like icon we could drag the provisioning file

• Certificate File: Open KeyChain Access, find Apple Development Certificate, right click and export.

After the configuration was set, click save button on the bottom right.

5. Build the Apps

After we configured the build, there will be "build now" button click it and do other work's while waiting for the build done.

Once it's done, the "distribute" and "Download" button will appear.

Voilà that's it ✨✨✨

App Center Limitation

For the free tier:

• There is maximal 4 hours build/month/user, means if the average of our apps build time is 20 mins, we can only build 12 times across project per month.
• There is maximal 30 minutes build /build, if our iOS build takes longer than 30 minutes we'll get error ##[error]The operation was canceled., in this case we'll need to upgrade tier 💸.
• There is only 1 (machine) concurrency to process our build, need to queue the build if we try to make 2 or more simultaneous build.

Paid tier :

• There is maximal 60 minutes build times/build, if our iOS build takes longer than 60 minutes we'll get error ##[error]The operation was canceled., for this issue currently App Center doesn't support it means we need to find alternative 🚫

Advice

App Center is easy to use, even at the free tier we can still use it for hobby project (just remember to turn off automatic build after push). But if we really want to upgrade to paid tier which cost $40/month/concurrent, Then make an organization on App Center and pay the bill as organization so the people under the organization can get the unlimited build times benefit (just make everybody admin).

Thanks for reading, any critique, grammar correction, or comment will be appreciated 🙌