The Ionic Capacitor is a new framework to build cross-platform apps. In this article, we will learn how to set up an Azure DevOps pipeline to build and deploy to AppCenter to distribute to test users.
For simplicity, I am going to build only the android project in this article. You can always add more jobs to run in parallel to build the other environments. Also, I am assuming that you have some experience build Azure pipelines and know about defining variables in the pipeline and how to store secrets in Secure Files and Variables. Please let me know in the comments if there anything specific about the pipeline you don’t understand,
I started with creating an empty yaml pipeline and here you have different options to choose your repo from. I have my repo on Azure reports Git and will select that and choose my repo from the next screen.
Once you select your repo you will get some recommendations in the Configure
I picked up the starter pipeline to get the basic pipeline in place, which will checkout the branch based on the trigger branch, which by default will be master.
Once you select the Starter pipeline you will get something like this.
we will start to make changes to the pipeline. If you are not aware of the new pipeline yaml CI/Cd, I would suggest giving YAML schema reference a read.
Trigger
The trigger defines the point when the pipeline will start running. There are so many things with trigger option
follow CI triggers to know more about it.
In my case, I have 2 branches one for UAT and one for release to production which is master. So I have included these 2 branches to be the trigger point. Any commit made to any of these branches will trigger the pipeline run.
Here is what configuration looks like
trigger:
branches:
include:
- master
- uatDifferent Environments
DevOps Changes
For each deployment stage, you will have to create an environment.
Environments lets to create approvals and checks
I have Approvals set for UAT(used a staging later in the code) branch and also have a branch control set for UA to allow only uat and master branhes are allowed to be deployed to this environment.
This is how the view of the pipeline run looks like
Configuration changes
There are different configuration settings for different environments. As mentioned earlier there are 3 different environemnts. I had configured for the pipeline. The ionic capacitor has different environment settings file we can use for different configurations.
if you are adding more environment to the ionic capacitor. You may want to add the configurations to the angular.json file
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"uat": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}
]
},Settings the parameters
you set the parameters in the environment files. e.g. if you want to change the api url for different environments.
export const environment = { production: true, apiBaseUrl: ‘#{prod_api_baseurl}#’ };
in your pipeline set the variable with that name with the value for production api url.
For replacing the tokens I am using replace-token-task plugin. Here is the configuration for the task.
- task: replacetokens@3inputs:rootDirectory: ‘./src/environments/’targetFiles: ‘**/*.staging.ts’encoding: ‘auto’writeBOM: trueactionOnMissing: ‘warn’keepToken: falsetokenPrefix: ‘#{‘tokenSuffix: ‘}#’displayName: “Replace environment variables”
Build and Deploy
The pipeline can get large and you should try to split the pipeline in templates. I used the following structure for pipeline
This is the file that will be calling the other templates.
ionic-build.yml: This is the template that has the steps to build the ionic project. This template accepts the parameter to build the environment.
Build and Deploy Android
Building and deploying for android is 3 steps process
- Build Ionic
- Sync and update Android Project
- Sign and deploy the apk to AppCenter
Below yaml template does the build and sign the apk and you just need to pass the correct parameters to it.
All the steps in the stage define themselves very well. I will explain a few of them. The most important part is the build type for the android build step.
tasks: ${{ parameters.gradletasks }}The ionic capacitor is code once and configures everywhere, for the Android build we would need to configure a build variant for the staging environment. This will help you change the AppIcon or AppId of the staging to make sure everyone can install the different flavors of the app on the phone. You need to add the variant in the build.gradle file
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
staging {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
applicationIdSuffix ".staging"
matchingFallbacks = ['release']
}
}
sourceSets { staging { res.srcDirs = ['src/staging/res'] } }you can add the new sourceset for the new environment and add the strings.xml to override parameters like changing the appname or appicon.
- The ionic capacitor sync command will build the Ionic project and copy the assets to the android project and any another native environment you have in the project.
- Android signing task will read the keystore file from the Secure files and other paramters defined in the pipeline variables.
- publish is the new yaml pipeline syntax to publish the build artifacts.
That completes the Build my app part of the pipeline for the android Now, the next part is to distribute the app to AppCenter.
Deployment to AppCenter
Pre-requisites: You should configure the app center service connection with Azure Devops.
The ionic deploy template contains the steps to deploy the android build to AppCenter.
For AppCenter distribution, task follow this document Deploy Azure DevOps Builds with App Center
Build and Deploy iOS
Build and deployment process is similar to iOS
- Build ionic project
- Sync and update ios project
- Deploy the app to TestFlight
Pre-requisite: You should create the provisioning profile and signing certificate for the project on Apple developer portal.
There are lot of things going on in the script.
- Moving the provisioning profile to the project folder
- Move the google services info plist file
- change the display name for the app
- change the bundle identifier for the app
- Set the Development team
Deploy
Pre-requisite: You would need an app-specific password for the tool to work.
That is how you can get the Ionic Capacitor app deployed to AppCenter and eventually to the devices and to the TestFlight for iOS
Please do let me know if you have any questions.
