January 31, 2023
  • Announcements
  • Product
  • Appflow
  • trapeze

Easily Automate Mobile Configuration in Appflow with Trapeze

Matt Netkow

If there’s one thing that developers love, it’s automation. Reducing the number of manual steps required to build and maintain an app (ideally to zero) is one of the most satisfying parts of development work. This becomes increasingly important when developing multiple apps (sometimes dozens at large companies!) at scale.

I’m happy to share that the Ionic team has made improvements to Appflow, our mobile CI/CD solution, to make project configuration easier. Along with Trapeze, Ionic’s native and cross-platform mobile project configuration tool, it’s never been easier to manage your mobile projects at scale. Whether you’re managing one iOS and Android app or dozens of white-labeled products, these tools are the best way to automate complex configurations.

Using a simple YAML-based configuration file format, developers can automate their project configuration for all types of mobile apps, including traditional iOS and Android apps and those built with cross-platform frameworks like Capacitor, React Native, and Flutter.

Let’s look at how to integrate Trapeze into Appflow.

Integrate Trapeze into Appflow

Before you can use Trapeze in Appflow, you’ll need to be an Appflow user. Sign up for free, then add your app to Appflow.

Next, install Trapeze into your project:

npm install @trapezedev/configure

Note: Appflow integration requires Trapeze version 7.0.7 and above.

Next, create a YAML file at the root of your project, such as this example, which automatically increments the build numbers of the Android and iOS native projects.

# appflow.yml
vars:
  CI_BUILD_NUMBER:
    default: 1

platforms:
  ios:
    buildNumber: $CI_BUILD_NUMBER
  android:
    versionCode: $CI_BUILD_NUMBER

Finally, execute the Trapeze YAML script using the appflow:build build command. If Appflow finds this command in your package.json file, it will run it instead of the npm build script.

# package.json
“scripts”: {
  "appflow:build": "npx trapeze run appflow.yml -y --$CI_PLATFORM && npm run build"
}

The Appflow-provided $CI_PLATFORM environment variable dynamically resolves to the platform name of the currently running build (either ios or android). The new --ios and --android flags tell Trapeze to run the specified platform only. Since Appflow only builds one platform at a time, combining these features effectively allows us to use one Trapeze script containing both iOS and Android commands in Appflow. 🎉

With Trapeze configured locally, push a code commit to Appflow then start a new iOS or Android build to put your Trapeze script into action. The build output for an iOS build will look similar to this:

Appflow build script detected...
$ npm run appflow:build
> capacitor-trapeze-tester@0.0.1 appflow:build
> npx trapeze run ci.yaml -y --$CI_PLATFORM && npm run build
▸ run ios buildNumber 25
▸ skip android versionCode 25
▸ updated ios/App/App.xcodeproj/project.pbxproj
▸ updated ios/App/App/Info.plist
▸ [info] -y provided, automatically applying configuration

In the example, this was the 25th build, so the iOS build number was set to 25.

For a cross-platform friendly script, add a check to the beginning of the build script to only run Trapeze during a mobile build:

"appflow:build": "if [ \"$CI_PLATFORM\" != \"web\" ]; then npx trapeze run ci.yaml -y --$CI_PLATFORM; fi && npm run build",

Integrate Trapeze into your Appflow CI/CD Workflows Today

Trapeze comes with a large set of supported operations across iOS and Android, as well as other practical operations that can work across projects. These include adjusting build settings, advanced app configuration, environment-specific configurations (i.e. dev vs. production), internationalization and localization, and more.

Since Trapeze was built with CI/CD in mind, it’s a perfect fit for Appflow. Get started with Appflow today and let us know how you’re using Trapeze to automate your mobile projects in the comments below.

Matt Netkow

Related Posts