Implementing Continuous Integration and Continuous Deployment (CI/CD) for your Ionic applications can significantly streamline your development process. Using GitHub Actions provides a powerful, flexible way to automate building, testing, and deploying your Ionic apps. This guide walks you through setting up Ionic CI/CD with GitHub Actions step-by-step.

Prerequisites

  • GitHub account with a repository containing your Ionic project
  • Node.js and npm installed locally
  • Git installed and configured on your machine
  • Basic knowledge of GitHub Actions and YAML syntax
  • Android SDK and/or iOS development environment (optional for mobile deployment)

Step 1: Prepare Your Ionic Project

Ensure your Ionic project is ready for production. Run the following commands to build your project:

ionic build --prod

This generates the production-ready files in the www directory, which will be used during deployment.

Step 2: Create a GitHub Workflow File

In your GitHub repository, create a new directory named .github/workflows. Inside, add a file named ionic-ci.yml.

name: Ionic CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Cache node modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Build Ionic app
        run: |
          npm run build --prod

      - name: Upload build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: ionic-build
          path: www/

Step 3: Add Deployment Steps

Depending on your deployment target, add steps to deploy your app. For example, deploying to Firebase Hosting:

      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          channelId: live
          projectId: your-firebase-project-id

Ensure you add your Firebase service account JSON as a secret named FIREBASE_SERVICE_ACCOUNT in your GitHub repository settings.

Step 4: Configure Secrets for Deployment

Navigate to your GitHub repository settings, then to Secrets, and add the necessary secrets:

  • FIREBASE_SERVICE_ACCOUNT: Your Firebase service account JSON
  • Other secrets: As needed for your deployment target

Step 5: Commit and Push Your Workflow

Save your ionic-ci.yml file, commit, and push to your repository:

git add .github/workflows/ionic-ci.yml
git commit -m "Add CI/CD workflow for Ionic app"
git push origin main

Step 6: Monitor Your Workflow

Go to the "Actions" tab in your GitHub repository to see your workflow run. Verify that the build and deployment steps complete successfully.

Conclusion

By following these steps, you automate the process of building and deploying your Ionic app using GitHub Actions. You can customize the workflow further to include testing, multiple deployment environments, or other steps tailored to your project needs.