blog illustration How to build Ionic Capacitor app in Xcode Cloud
Tutorial
September 01, 2022

How to build Ionic Capacitor app in Xcode Cloud

Use Xcode cloud to build your Capacitor JS app and bypass the need of MacOS.

Prerequisites

Before continuing with the tutorial…

  • Make sure you use GitHub
  • Use Capacitor
  • Your app is already deployed on Apple Store
  • Desire to read 😆…

Using Ionic is optional, for Cordova it could work, but I didn't try.

Important about the price

Price Xcode Cloud

https://developer.apple.com/xcode-cloud/

The service is ‘free’ up to the limit.
You can see in the screenshot price and limits (prices as of the creation of the tutorial, they could undergo changes in the future)

🔴 Once warned of requirements and prices, if you like, we continue...

📣 In the post, we assume that we have the app created in Apple Store

Intro

To make Xcode build your Capacitor app, you need to set up a few things.

Package Preparation

Be sure to have your build command in your package.json script. Then add the sync:ios command like below.

{  "scripts": {    "build": "YOUR BUILD COMMAND",    "sync:ios": "cap sync ios"  }}

This step will make the post script work simply

Post clone script

This script will be run by Xcode cloud after the clone step

#!/usr/bin/env bashset -xexport HOMEBREW_NO_INSTALL_CLEANUP=TRUEbrew install cocoapods# have to add node yourself link to this issue https://stackoverflow.com/questions/73462672/xcode-cloud-suddenly-failing-to-link-node-and-install-dependenciesNODE_VER=16VERSION=$(curl -s https://nodejs.org/dist/latest-v$NODE_VER.x/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')if [[ "$(arch)" == "arm64" ]]then  ARCH="arm64"else  ARCH="x64"ficurl "https://nodejs.org/dist/latest-v$NODE_VER.x/node-$VERSION-darwin-$ARCH.tar.gz" -o $HOME/Downloads/node.tar.gztar -xf "$HOME/Downloads/node.tar.gz"NODE_PATH="$PWD/node-$VERSION-darwin-$ARCH/bin"PATH+=":$NODE_PATH"export PATHnode -vnpm -vbrew install pnpm # optional, you can also install yarn if you use it# Install dependenciespnpm install --frozen-lockfile# or `npm ci` or `yarn install --frozen-lockfile`npm run mobile # or npm run buildnpm run sync:ios

Save this file in the root of your project and name it ios/App/ci_scripts/ci_post_clone.sh

Create a Xcode workflow

Open Xcode (yes, to remove Xcode you need Xcode)

And go to this tab : Xcode step 1

Click on create workflow, select your app, click next like below.

Xcode step 2

Click on Edit workflow on the left Xcode step 2

Go to environments tab and chose like below Mac 12.4 and check the proper option Xcode step 3

Choose your start condition. If you use the same build as us, I suggest to use Tag instead of branch, to avoid double build.

Set your env variable Xcode step 4

Connect your GitHub account Xcode step 5

Xcode step 6

Then enable and the workflow and commit your first change, you should see your build running in Xcode.

Build Processing

In Xcode Cloud, you are billed based on the minutes you have used for running your CI/CD workflow. From experience, it takes about 10–15 minutes before a build can be processed in Apple Store.

For private projects, the estimated cost per build can go up to $0.008/min x 5 mins = $0.4, or more, depending on the configuration or dependencies of your project.

For Open-source projects, this shouldn’t be a problem at all. See pricing.

blog illustration Update your Capacitor apps seamlessly using Capacitor-updater
Tutorial

Update your Capacitor apps seamlessly using Capacitor-updater

February 27, 2022

Greetings Capacitor Ionic Community, today I'll be helping you setup Capacitor-updater into your app. So that you can do seamless releases.