Building Ionic + Capacitor on AppCenter

4 min readAug 23, 2020

As we know, PhoneGap and PhoneGap Build will end on October 1, 2020. Many users used PhoneGap Build to compile and distribute iOS and Android applications for development and test purposes. Now we have to find a way to compile and distribute our applications. Today I bring you an alternative.

I use App Center (https://appcenter.ms/) for build and distribute my applications, I will show an step by step tutorial with how to do it with Ionic (https://ionicframework.com/) and Capacitor (https://capacitorjs.com/)

Let’s start

App Signing

In order to build and distribute iOS and Android apps on App Center, you need to sign your applications, by following this links, you can generate the appropriate files.

For Android: https://developer.android.com/studio/publish/app-signing
For iOS: https://help.apple.com/xcode/mac/current/#/dev60b6fbbc7

2. Create an Ionic application

I’ll use react as type for my app and Capacitor integration. Run the following command to create it.

ionic start demo-app-center tabs —-capacitor —-type react

Then open capacitor.config.json and change the appId by your appId.

Now, start coding your app… and run:

ionic build

This will compile your ts/js code and creates and optimized build for production of your app.

After that we need to add iOS and Android to our project, Capacitor do that for us, simply run:

npx cap add ios
npx cap add android

This will add iOS and Android to our project, on the app file tree you can find and ios and android folders that contains the native projects respectively. Now Open the ios project running npx cap open ios this open Xcode, then, got to Product -> Schemes -> Manage Schemes , and for your app select App Workspace.

3. Add post commit action for App Center

In order to build our app con App Center we need to do some steps to build all the needed assets for our application. To do this create a file called appcenter-post-clone.sh on the following paths:

ios/App/App/appcenter-post-clone.sh
android/app/appcenter-post-clone.sh

And add the this content to it:

#!/usr/bin/env bashsudo npm cache clean -fsudo npm install -g nsudo n stablesudo npm install yarn -gsudo npm install -g ioniccd ../../npm iionic buildnpx cap sync

This script, install latest node stable version, install Ionic cli, install node packages, run ionic build to compile our ts/js code and sync all the assets with npx cap sync to update the js compiled code to the Capacitor iOS and Android projects.

3. Upload your code

Now you have to upload your source code to a version control repository, for this tutorial I’ll use Github (https://github.com/arielhernandezmusa/demo-app-center.git).

4. App Center set up

Go to app center and register (https://appcenter.ms/)

Create two apps one for iOS and one for Android

After you create the apps connect each app to your source code repository by clicking Build on the left side menu, and select your source code repository, Github in my case, and then select your repository.

After connect your repository you cam see the branches and you can set up a build for a branch. Click on the configuration icon en de right side of your branch, set the sign settings for your apps.