Building Ionic App With CI

By David Nimon

September 7, 2023

Ionic is a framework that allows for cross-platform apps built with the web. This can be used with Angular, React, Vue, etc. We use Ionic with Angular on our projects.

There is also a community effort to support Ionic for desktop apps, through Electron.

Once you have an ionic capacitor project setup, and have added Android and Electron apps to it, you can create a Github/Gitea Action to automatically create testing builds.

This could look like the following, and was tested on Gitea.

name: Debug Ionic Builds
on: [pull_request]
jobs:
  android_build:
    name: Build Android
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v3
      - name: Setup java
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '17'
      - name: Setup Android SDK
        uses: amyu/setup-android@v2
        with:
          cache-disabled: true
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Change wrapper permissions
        run: cd android && chmod +x ./gradlew
        shell: bash
      - name: Install UI Packages
        run: npm install
        shell: bash
      - name: Build UI And Sync
        run: npm run build && npx cap sync android
        shell: bash
      - name: Build Project
        run: cd android && ./gradlew build
        shell: bash
      - name: Build Debug Build
        run: cd android && ./gradlew assembleDebug
        shell: bash
      - name: Upload Build as Action Artifact
        uses: actions/upload-artifact@v3
        with:
          name: android-build.apk
          path: android/app/build/outputs/apk/debug/app-debug.apk
  linux_build:
    name: Build Linux Desktop App
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install UI Packages
        run: npm install
      - name: Build UI And Sync
        run: npm run build && npx cap sync @capacitor-community/electron
      - name: Install Electron Packages
        run: cd electron && npm install
      - name: Build Electron Release
        run: cd electron && npm run electron:make
      - name: Upload Build as Action Artifact
        uses: actions/upload-artifact@v3
        with:
          name: linux-build.AppImage
          path: electron/dist/*.AppImage
  windows_build:
    name: Build Windows Desktop App
    runs-on: ubuntu-latest
    container:
      image: electronuserland/builder:wine
    steps:
      - name: Check out repository code
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install UI Packages
        run: npm install
      - name: Build UI And Sync
        run: npm run build && npx cap sync @capacitor-community/electron
      - name: Install Electron Packages
        run: cd electron && npm install
      - name: Build Electron Release
        run: cd electron && npm run electron:make -- --win
      - name: Upload Build as Action Artifact
        uses: actions/upload-artifact@v3
        with:
          name: windows-build.exe
          path: electron/dist/*.exe

Once this completes, you will have artifacts for Windows, Linux, and Android. Building iOS and Mac apps could be possible as well, with a Mac runner. Windows could also be run on a Windows runner, instead of using the electronuserland/builder:wine image.

Action Run Result

This could be extended further to create signed releases on a tag creation, and to upload them to your website/app stores.