Skip to main content

Building Ionic Projects with Custom Scripts

Appcircle provides Ionic projects through custom scripts.

You can use the following project as an example for running Ionic builds in Appcircle:

Preview of GitHub - appcircleio/appcircle-sample-ionic: a Vue project with Ionic Framework

The sample project is built with Vue though other Ionic project types can also be built in a similar manner. For the build, Capacitor is recommended and this document is based on projects configured to be built with Capacitor in Android Studio or Xcode.

To build an Ionic project, first, add and configure it like a React Native project.

One important point to take note is that capacitor-cordova-android-plugins folder is automatically added to .gitignore file, but it is required during the build. The folder can be removed from the .gitignore or it can be regenerated during the build; though the former is recommended for a successful Fetch) operation. For more information, you can refer to the following Git issue for Capacitor:

Preview of Android pipeline build error in Azure - could not read script 'cordova.variables.gradle' as it does not exist · Issue #1628 · ionic-team/capacitor

You can then add the custom scripts before the build steps and run the build normally.

Android Custom Script for Ionic Builds

For Android, add the following script before the "Android Build" step.

set -e
set -x

cd $AC_REPOSITORY_DIR

npm install -g @ionic/cli
ionic capacitor copy android

iOS Custom Script for Ionic Builds

For iOS, add the following script before the "Xcodebuild for Devices" step.

set -e
set -x

cd $AC_REPOSITORY_DIR

npm install
-g @ionic/cli

ionic capacitor copy ios

Need help?

Get help from Appcircle's support team, or see how others are using Appcircle by joining our Slack Channel.

Preview of Slack