Ionic 3/4 Build using Github Actions

Problems :

1. Need to install all the Android SDK and Android bundles in order to build an apk.
2. For small changes in gradle version can produce error in build.
3. Need to run all the Ionic commands to build the app after the changes.

Solution :

Github Actions :

What is Github Actions ?

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.

Yes it allows you to add a workflow i.e a sequence of task to process a set of data.

It also allows a trigger mechanism. It can be triggered by an event (commit, pull request, etc.) or can be scheduled.

Explore GitHub Actions

Prerequisite :

1. Github Account.
2. A new github Repository
3. Ionic, Cordova and Git installed on your system
4. A directory containing Ionic Project with all the modules installed.

First of all we will add an android platform of our project :

1. Move to the Ionic project directory and open the command prompt.
2. Run the command to add platform

 ionic cordova prepare android

3. Now you have an android platform containing all the necessary files.

Note: Make sure that your android platform contain gradlew file. if not present pull the gradle/wrapper, gradlew and gradlew.bat from here

4. cd /platforms and then to android.

5. Upload the files present in android folder to git repo.

6. you need to add .github/workflows folder into the root of your repository.

OR

click on actions tab in github repo and select Android CI / Java CI this will provide you android.yml / java.yml containing a demo workflow .

7. Now create your own workflow :

Explanation :

name : Android Build CI
on: [push]

The name tag gives a name to the CI(of your choice)

on tag is used as trigger option. Here i have used push as trigger.

jobs:  
   build:        
     name: Generate APK    
     runs-on: ubuntu-latest

jobs tag denotes the task to be done and build here is ID of the task. The name tag specifies the name of the task. We will be using ubuntu system so we specify the os on which this task will be performed.

steps:     
 - uses: actions/checkout@v1     
 - name: set up JDK 1.8     
   uses: actions/setup-java@v1       
   with:         
      java-version: 1.8

it consist of step to follow to here are 2 steps . The first one is the actions to actions/checkout@v1 checkout the repository more actions can be found out here.

secondly we setup JDK 1.8/8 environment and use this environment for further steps.

- name: Build debug APK        
  run: bash ./gradlew assembleDebug --stacktrace

Next step is to build the apk. we will be directing the path of the gradlew located in our repo, as it is an Android project it uses Gradle for build lifecycle, therefore to run the build we need to use Gradle Wrapper file. The command assembleDebug which will result with built Android APK file.

Now we have set up the workflow to build the apk which is triggered on push.

Lets check it now :

But Where is the Apk ?

The workflow we have now only builds the apk and removed after the flow is terminated.So how to get it ?

we need to persist the apk after the workflow is terminated. For that we will use github actions/upload-artifact@v1 to persist the apk.

- name: Upload APK        
  uses: actions/upload-artifact@v1        
  with:          
    name: app         
    path: app/build/outputs/apk/debug/app-debug.apk

Here we are naming the output apk file as app

Last we have the Upload Apk which then uses the action/upload-artifact@v1.

In the with element we indicate which file (in path) should be saved.

it will move the ‘app’ from ‘/home/runner/work/{your repo}/{your repo}/app/build/outputs/apk/debug/app-debug.apk’ to the server.

So now we have set the workflow to build an apk and also get the build apk on artifact which is present on the top right corner of the CI window.

Next I will be working on building the Ionic App for other platforms too.Do checkout my progress here.

gauravprasadgp/ionic_github_actions

References :

Automating your workflow with GitHub Actions