Automating Ionic mobile applicaton building

Today for developing a cross-platform application, you have a lot of options, like Flutter, Cordova, Ionic, React Native and so on. When comes to development, frameworks/solutions, which utilize JavaScript are quite popular, due to the smoother transition from Web to Mobile. In this article let's focus on Ionic framework, which is framework-agnostic and can be developed with Vanilla JS. Namely, we will be looking at Capacitor, which is recommended by Ionic team.

How to create Vanilla Ionic project

As been mentioned, Ionic have possibility to build with such libraries/frameworks as React/Angular, but it does not limiting in choice of frameworks. Let's create a folder vanilla-ionic-app and install Ionic dependencies. In this example we'll use yarn, but you can utilize npm as well. We will also use Webpack for better

mkdir vanilla-ionic-app
cd vanilla-ionic-app
npm init -y 
yarn add -D @capacitor/core @capacitor/cli @capacitor/android webpack webpack-cli html-webpack-plugin
npx cap init 
npx cap add android

This should create a basic skeleton, where you should be able to write smallest example for building application Open your preferred text editor and make following changes:

1. Add src/index.js file and fill it with following:

function App() {
	// let's show to user simple greeting
	const helloWorld = document.createElement('h1');
	helloWorld.innerHTML = 'Hello World!';
	document.body.appendChild(helloWorld);
}
App();

2. Make sure, that your capacitor.config.json looks similar to this:

{
  "appId": "com.example.app",
  "appName": "vanilla-ionic-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

Creating the necessary steps in Gitlab pipeline

For compilation of Capacitor application you should have both NodeJS and Java installed on the system. For that reason, we have constructed a base Docker image, which we will use in this example. In order to compile the Ionic/Capactitor application you need to execute the build step for Webpack, copy result to the android folder and compile using Gradle For reference, you can use snippet below and adjust for your needs

default:
  image: ghcr.io/fallenangel97/alpine-android-nodejs:master

stages:
- build

build_android:
  stage: build
  script:
    - yarn
    - yarn build
    - npx cap sync android
    - npx cap copy
    - cd android
    - ./gradlew bundleRelease
    - cp ./app/build/outputs/bundle/release/app-release.aab ../app-release.aab

  artifacts:
    paths:
      - ./app-release.aab
    expire_in: 1 week

Photo by Dovile Ramoskaite on Unsplash