{"id":14350,"date":"2023-06-27T12:52:49","date_gmt":"2023-06-27T07:22:49","guid":{"rendered":"https:\/\/opstree.com\/blog\/\/?p=14350"},"modified":"2025-11-20T15:03:35","modified_gmt":"2025-11-20T09:33:35","slug":"cicd-for-mobile-app-development-using-capacitor-js-on-azure-devops","status":"publish","type":"post","link":"https:\/\/opstree.com\/blog\/2023\/06\/27\/cicd-for-mobile-app-development-using-capacitor-js-on-azure-devops\/","title":{"rendered":"CICD for Mobile App Development Using Capacitor JS on Azure DevOps"},"content":{"rendered":"\r\n

In the world of iOS mobile app development, implementing a robust CI\/CD (Continuous Integration\/Continuous Delivery) pipeline is essential to ensure efficient and reliable software delivery. Capacitor JS is a powerful framework that allows developers to build cross-platform mobile apps using web technologies. When combined with Azure DevOps, it enables a seamless CI\/CD pipeline for iOS app development. In this blog post, we will guide you through the process of setting up a CI\/CD pipeline<\/a> for iOS mobile apps using Capacitor JS and Azure DevOps.<\/p>\r\n\r\n\r\n\r\n

A Note on Capacitor JS<\/em><\/h2>\r\n\r\n\r\n\r\n

Capacitor is a free and open source (MIT-licensed) platform that enables web developers to build cross-platform apps with standard web technology that runs in modern browsers. Capacitor takes your existing web application and runs it as a native app on each platform, providing hooks into the native platform via JavaScript. These hooks can be built directly into the app, or as standalone plugins to be reused and distributed to others.

Can I reuse existing web code and share new code with a web app?<\/strong>
Yes! One of the strengths of Capacitor is that it runs normal web apps natively. In many cases, teams have a single codebase for web and mobile using Capacitor.<\/p>\r\n\r\n\r\n\r\n

Prerequisite –<\/strong><\/h2>\r\n\r\n\r\n\r\n

1. An azure devops account.
2. Working Web app code
3. App center account for distribution<\/p>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

Let’s begin<\/strong> …<\/h5>\r\n\r\n\r\n\r\n

Setup an azure devops account.\u00a0<\/em>
By default under free subscription we get to use linux VMs. In order to use mac VM, we will need to get subscription. Only one agent will be more than enough for our CICD pipeline.<\/p>\r\n\r\n\r\n\r\n

Create an organization<\/strong> and a project.\u00a0Once we have create our project, we move forward to create a new pipeline.

<\/p>\r\n\r\n\r\n\r\n


Configure to link the current project with your code base, which can reside in any VCS. We will be using bitbucket cloud so need to configure the same.<\/p>\r\n\r\n\r\n\r\n


<\/p>\r\n\r\n\r\n\r\n

Connect, select, configure and review according to your requirements.<\/p>\r\n\r\n\r\n\r\n

Once done, we will start with writing code for the pipeline. If you already worked with azure pipelines, you might know how easy it is to add steps since azure provides us with an assistant.<\/p>\r\n\r\n\r\n\r\n




Step 1 –<\/strong> configure pool image – we are developing for ios so have configured macOS-12, since the default xcode version provided by macOS-12 is xcode 14, which satisfies our requirement.<\/p>\r\n\r\n\r\n\r\n

 <\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 2 –<\/strong> optional<\/em> – configure environment variables for your pipeline. In this I’m adding variable to specify the deployment environment.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 3 –<\/strong> Download the required node version on the agent.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 4 –<\/strong> Installing dependencies and capacitor core and cli.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 5 –<\/strong> Building the app using \u201cnpm run ng build\u201d<\/em><\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 6 –<\/strong> npx sync for ios\/android folder\u00a0<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 7 –<\/strong> Install apple provisioning certificate and profiles. This requires us to first upload the certificate and profile files to azure, under secure files inside the library in pipelines.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

 <\/p>\r\n\r\n\r\n\r\n

Once uploaded, we need to add step in our pipeline to install the profile and certificate<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 8 –<\/strong> Install cocoapods in synced ios folder. Cocoapods helps you to manage and incorporate third-party libraries into your project without getting concerned about setting up and configuring your project.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 9 –<\/strong> Xcode build- this will be the step where we bundle and package our application to .ipa file<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

 <\/p>\r\n\r\n\r\n\r\n

Step 10 –<\/strong> optional<\/em> – Naming ipa file.It\u00a0 is best practice to name the app with some meaningful name, based on environment and version and moving finished app to artifact staging<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 11 –<\/strong> Publish artifact\u00a0<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


Step 12 –<\/strong> Publish to App center. For this, add a service connection for App center in Project setting>Service connection. To generate a service connection, create an account at app center and create a new API token, making sure the API token has full access (so that Azure DevOps can create new releases for distribution), then copy the key. We will use this service connection to establish communication between azure devops and the app center. Alternatively, we can upload the artifact at s3 bucket as well, depending upon the requirements.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


We’ll need to add the appSlug and distributionGroupId from app center account as well.
Once done, this is what the pipeline looks like –\u00a0\u00a0<\/p>\r\n\r\n\r\n\r\n

pool:\r\n    vmImage: macOS-12\r\n\r\nparameters:\r\n  - name: environment\r\n    displayName: Configuration based on env\r\n    type: string\r\n    default: DEV\r\n    values:\r\n    - PROD\r\n    - UAT\r\n    - SIT\r\n    - DEV\r\n        \r\nsteps:\r\n     \r\n- task: NodeTool@0\r\n  displayName: install node version\r\n  inputs:\r\n    versionSource: 'spec'\r\n    versionSpec: '16.18.0'\r\n\r\n- task: CmdLine@2\r\n  displayName: install dependecies\r\n  inputs:\r\n    script: |\r\n      npm install --ignore-scripts\r\n      npm install typescript@4.6.4 --save-dev\r\n      npm i @capacitor\/core\r\n      npm i -D @capacitor\/cli\r\n      npm install @capacitor\/ios\r\n      \r\n- task: CmdLine@2\r\n  displayName: npm build\r\n  inputs:\r\n    script: 'npm run ng build -- --c=${{ parameters.environment }}'\r\n\r\n- task: CmdLine@2\r\n  displayName: sync up android and iOS folder\r\n  inputs:\r\n    script: |\r\n        npx cap sync\r\n\r\n- task: InstallAppleCertificate@2\r\n  displayName: install apple signing certificate\r\n  inputs:\r\n    certSecureFile: 'P12_signing_cert.p12'\r\n    certPwd: '****'\r\n    keychain: 'temp'\r\n\r\n- task: InstallAppleProvisioningProfile@1\r\n  displayName: install apple provisioning profile\r\n  inputs:\r\n    provisioningProfileLocation: 'secureFiles'\r\n    provProfileSecureFile: 'DEV_PROFILE.mobileprovision'\r\n\r\n- task: CocoaPods@0\r\n  displayName: install cocoapods\r\n  inputs:\r\n    workingDirectory: 'ios\/App'\r\n    forceRepoUpdate: false\r\n\r\n- task: Xcode@5\r\n  displayName: 'Building IPA File'\r\n  inputs:\r\n    actions: 'build archive'\r\n    sdk: iphoneos\r\n    xcWorkspacePath: 'ios\/App\/App.xcworkspace'\r\n    scheme: 'App'\r\n    packageApp: true\r\n    signingOption: manual\r\n    signingIdentity: '$(APPLE_CERTIFICATE_SIGNING_IDENTITY)'\r\n    provisioningProfileUuid: '$(APPLE_PROV_PROFILE_UUID)'\r\n    teamId: '******'\r\n    xcodeVersion: \"default\"\r\n  \r\n\r\n- task: CmdLine@2\r\n  displayName: Naming ipa file\r\n  inputs:\r\n    script: |\r\n        appversion=$(cat package.json | head | grep -w \"version\" | awk '{print $2}' |cut -c 2-6)\r\n        mv \/Users\/runner\/work\/1\/s\/output\/App.ipa \/Users\/runner\/work\/1\/s\/output\/myapp_${{parameters.environment}}_${appversion}.ipa\r\n\r\n- task: CopyFiles@2\r\n  displayName: 'Copy Files to: $(build.artifactStagingDirectory)' \r\n  inputs:\r\n    SourceFolder: '\/Users\/runner\/work\/1\/s\/output'\r\n    Contents: '*.ipa'\r\n    TargetFolder: '$(Build.ArtifactStagingDirectory)'\r\n\r\n\r\n- task: PublishBuildArtifacts@1\r\n  displayName: 'Publish Artifact: drop'\r\n  inputs:\r\n    PathtoPublish: '$(Build.ArtifactStagingDirectory)'\r\n    ArtifactName: 'ios'\r\n    publishLocation: 'Container'\r\n\r\n- task: AppCenterDistribute@3\r\n  displayName: distribute to app center\r\n  inputs:\r\n      serverEndpoint: 'mobileCI'\r\n      appSlug: '******'\r\n      appFile: '$(Build.ArtifactStagingDirectory)\/**\/*.ipa'\r\n      releaseNotesOption: 'input'\r\n      releaseNotesInput: 'Test Version'\r\n      symbolsOption: 'Apple'\r\n      destinationType: 'groups'\r\n      isSilent: False\r\n      distributionGroupId: '*******'\r\n    \r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Save and run the pipeline. Once completed, we can see the published artifact on Azure devops pipelines<\/a> build page. Check at the app center for the latest version of the app available.<\/p>\r\n\r\n\r\n\r\n
Additionally, we can also configure teams channel notifications to notify team whenever a build is triggered :\u00a0<\/p>\r\n\r\n\r\n\r\n
Create a teams channel, and add azure pipelines app to the channel.
Login to the azure account, but first we will also need to allow third party application access via oAuth\u00a0 in our azure organization settings – under Security > Policies<\/em><\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Now from teams channel, we need to subscribe to our pipeline\/project, depending on what all notifications we need.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Conclusion<\/h2>\r\n\r\n\r\n\r\n
Implementing a CI\/CD pipeline for iOS mobile app development using Capacitor JS and Azure DevOps streamlines the software delivery process, enhances collaboration, and ensures the quality of your iOS apps. By following the steps outlined in this blog post, you can establish an efficient CI\/CD pipeline to automate build, test, and deployment processes, allowing you to deliver high-quality iOS apps to your users quickly and reliably.<\/p>\r\n\r\n\r\n\r\n
Blog Pundits: Mehul Sharma<\/a><\/strong> and Sandeep Rawat<\/a><\/strong><\/p>\r\n\r\n\r\n\r\n
Related Searches –\u00a0 DevOps Solution<\/a> | Data Engineering Services<\/a>\u00a0\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n
<\/div>\r\n\r\n\r\n\r\n