{"id":4798,"date":"2023-01-31T11:18:05","date_gmt":"2023-01-31T16:18:05","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4798"},"modified":"2023-01-31T17:50:36","modified_gmt":"2023-01-31T22:50:36","slug":"easily-automate-mobile-configuration-in-appflow-with-trapeze","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/easily-automate-mobile-configuration-in-appflow-with-trapeze","title":{"rendered":"Easily Automate Mobile Configuration in Appflow with Trapeze"},"content":{"rendered":"\n

If there\u2019s one thing that developers love, it\u2019s 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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

Let\u2019s look at how to integrate Trapeze into Appflow.<\/p>\n\n\n\n

Integrate Trapeze into Appflow<\/h2>\n\n\n\n

Before you can use Trapeze in Appflow, you\u2019ll need to be an Appflow user. Sign up for free<\/a>, then add your app to Appflow<\/a>.<\/p>\n\n\n\n

Next, install Trapeze into your project:<\/p>\n\n\n\n

npm install @trapezedev\/configure\n<\/code><\/pre>\n<\/div>\n\n\n\n
\n
Note: Appflow integration requires Trapeze version 7.0.7 and above.<\/p>\n<\/blockquote>\n\n\n\n
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.<\/p>\n\n\n\n
# appflow.yml\nvars:\n  CI_BUILD_NUMBER:\n    default: 1\n\nplatforms:\n  ios:\n    buildNumber: $CI_BUILD_NUMBER\n  android:\n    versionCode: $CI_BUILD_NUMBER\n<\/code><\/pre>\n<\/div>\n\n\n\n
Finally, execute the Trapeze YAML script using the appflow:build<\/code> build command. If Appflow finds this command in your package.json<\/code> file, it will run it instead of the npm build script.<\/p>\n\n\n\n
# package.json\n\u201cscripts\u201d: {\n  "appflow:build": "npx trapeze run appflow.yml -y --$CI_PLATFORM && npm run build"\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n
The Appflow-provided $CI_PLATFORM<\/code> environment variable dynamically resolves to the platform name of the currently running build (either ios<\/code> or android<\/code>). The new --ios<\/code> and --android<\/code> 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. \ud83c\udf89<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
Appflow build script detected...\n$ npm run appflow:build\n> capacitor-trapeze-tester@0.0.1 appflow:build\n> npx trapeze run ci.yaml -y --$CI_PLATFORM && npm run build\n\u25b8 run ios buildNumber 25\n\u25b8 skip android versionCode 25\n\u25b8 updated ios\/App\/App.xcodeproj\/project.pbxproj\n\u25b8 updated ios\/App\/App\/Info.plist\n\u25b8 [info] -y provided, automatically applying configuration\n<\/code><\/pre>\n<\/div>\n\n\n\n
In the example, this was the 25th build, so the iOS build number was set to 25.<\/p>\n\n\n
\n
\"\"