Using CodeMagic for Capacitor and Ionic App

Integrating CloudMagic in your Capacitor and Ionic App can make your mobile app development process, easier to build, test, and deploy. CodeMagic is a Continuous Integration and Continuous Deployment (CI/CD) platform that is specifically designed for mobile app developers. It supports multiple frameworks such as Flutter, React Native, Native Android, Native iOS, and more.

Image from codemagic.io

In this blog, I will provide you with a step-by-step guide on how to integrate Ionic with the CodeMagic Cloud platform:

Create a CodeMagic Account

If you haven’t already, sign up for an account on the CodeMagic website.

Connect your Version Control Platform

CodeMagic integrates with version control platforms like GitHub, GitLab, and Bitbucket. Connect to your Ionic project’s repository.

Create a New App in CodeMagic

Once your version control platform is connected, create a new app. Select the repository where your Ionic project is located.

Configure Build

CodeMagic provides a configuration file named codemagic.yaml that allows you to define your build and deployment settings. Here's a basic example of an Ionic and Capacitor project:

workflows:
  android-workflow-id:
    environment:
      groups:
        - firebase
        - google-map
        - aws
    name: Android Workflow
    scripts:
      - name: Packages
        script: |
          npm install
          ...
          ...
          brew install gradle
      - name: Export Configs
        script: |
          ...
          ...
      - name: Build Android
        script: |
          npm run build
          npx cap sync
          cd android
          ./gradlew assembleDebug
      - name: Print Gradle Signing Report(TO COPY TO FIREBASE)
        script: |
          cd android
          gradle signingReport
          gradle signingReport >> sha.txt
    artifacts:
      - android/app/build/outputs/**/*.apk
        ...
        ...

The location of codemagic.yaml should be on the top level of the application(same as package.json).

Configure Deployment

If you want to configure your app to deploy directly to stores for testing, and any other deployment tasks. You need to have a configuration in the codemagic.yaml. In the example below, it shows how to configure the Firebase App Distribution store.

workflows:
  android-workflow-id:
    ...
    ...
    publishing:
      firebase:
        firebase_token: $firebase_token
        android:
          app_id: $mobilesdk_app_id
          groups: 
            - Testers

The other stores that are supported are App Store Connect, Google Play, Microsoft App Center, Microsoft Store, and more. All the stores are listed in this documentation.

Start a Build

Once the config file setup has been set up, you can trigger a build as shown in the screenshot below. CodeMagic will automatically detect changes in your repository branch and start the build process based on the defined workflows.

Also when a change has been done on the remote repository, all the changes are automatically detected on CodeMagic

Monitor Build Progress and Deployment

You can monitor the build progress and deployment status through the CodeMagic dashboard. If everything is set up correctly, your Ionic app will be built, tested, and deployed according to your configured workflows. The screenshot below shows the build progress of a build.

Remember that this is a high-level overview of integrating Ionic with the CodeMagic Cloud platform. Depending on your specific requirements, you might need to adjust the configuration and settings accordingly. Always refer to the CodeMagic documentation and Ionic documentation for more detailed information and troubleshooting.

By following these steps, you can seamlessly integrate your Ionic project with CodeMagic, enabling efficient CI/CD pipelines for your mobile app development process.