Include Commit Build inside Ionic App

Ionic Framework Ionic Angular
1

Hey folks,

is there any way to somehow include the git commit build inside the Ionic App.

Let me describe it a little bit further:
I have different repositories for my apps with each different branches (dev / master / production). I submit all my changes to dev and do a merge request to master - master is spins up a staging from master. Now inside my master branch I would like to be able to include the commit tag at the bottom of my sidemenu for example. Is there any way how I could do this?

My repository by the way builds an image from a Dockerfile.

Thanks in advance,
Oliver

2

I do something like this, and while I make no pretense that this is the best or only way to do things, here’s what I do.

I have a program that I call “slugger” (it’s written in Go, but would be pretty easy to convert to run in a shell or node). It fetches three bits of data, returned from three git commands:

git branch --show-current gives me the branch
git rev-parse --short HEAD gives me the commit
the return code from git diff --quiet tells me whether we’re dirty

slugger is designed to do different things with this information depending on what language it’s working with. In the TypeScript case, it writes a file that looks like this:

export interface Version {
  branch: string;
  commit: string;
  snapshot: boolean;
}

export const version: Version = {
  branch: "%s",
  commit: "%s",
  snapshot: %t,
}

As you can probably surmise, the % things are format arguments to a sprintf-type function. The idea is that you’re replacing that stuff with the results you got from the three git commands. The result gets written out to a file (I put it in src/environments/version.ts).

It is very important to make git ignore this file. I add it to src/environments/.gitignore. Failing to do this properly will result in an Escher Drawing Hands situation where you never get stable results because the commit hash changes, causing that file to change, causing the commit hash to change again, and so on down the rabbit hole.

Inside the app, you can simply import version from wherever you put it and refer to version.branch, version.commit, and version.snapshot to your heart’s content.

The final step is integrating this into the build process. What I do is to modify the build script in package.json to look like this:

"build": "slugger --lang=ts > src/environments/version.ts && ng build",

Now, whenever I run npm run build, slugger does its thing and then we perform the ordinary angular build process, which will include the most recent git information in the app bundle.

Hope this gives you at least a possible avenue of exploration.

3 Likes
3

Hey @rapropos

thanks a lot, but I found a different approach before I saw your solution… cause I have to build a Docker Image anyway to deploy it later on (Web/PWA).

This is what I do - it is basically just a Dockerfile:

FROM node:12.18.4-alpine3.9 as builder
COPY . /www
RUN apk add --no-cache git
RUN npm install -g ionic@latest
RUN npm install -g gen-app-version
WORKDIR /www
RUN npm install --save-dev --unsafe-perm node-sass
RUN npm link @angular/cli
RUN ng add @angular/pwa
RUN genAppVersionTS
RUN npm run-script prod
FROM pagespeed/nginx-pagespeed:stable
COPY ./nginx/ionic.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /www/www/ /usr/share/nginx/html
RUN chown -R nginx:nginx /usr/share/nginx/html

And within the code I just import the .ts file and output it in the .html file, e.g.

.ts file:

import { Component, OnInit, Input } from '@angular/core';
import { VERSION } from '../../../app-version';
...
export class TestComponent implements OnInit {
  @Input() name: string;
  readonly commit_info = VERSION;

  constructor() { }

.html file:

...
<small>V#{{commit_info.hash}}s</small>
...

And it really works perfect.

My deploy pipeline is kinda complex – I’m using Appflow and DO Apps.

Local -> Gitlab.com (Dev branch) -> Gitlab.com (Merge Branche Dev->Master) -> Sync Mirror Repository Github.com -> Github.com (On New Commit) -> New DO App Rollout

But works at the current step perfect. A lot less work compared to what I did before based on private Gitlab (CI/CD), Private Registry & Kubernetes.

Thanks again & cheers,
Olli