Inject build timestamp into Angular-cli build output files to verify deployments.

Problem: A typical enterprise architecture might have multiple Angular apps, releases and environments. Normally we would commit the source code to SVN/GIT and use Jenkins to build the output and deploy it particular environments. One of the common problem is to verify whether the latest build was deployed to the appropriate environment. Several teams like Devops, network, frontend, backend etc. will be involved to trace the root cause.

Solution: We can add timestamp on build log and in each file of the build output. We can also leverage node modules like git-info or svn-info to inject information related to the source.

Source code:

kaustubhtalathi/angular-timestamp

Initial Setup:

NodeJS:

How to install NodeJS

Angular Application using Angular-CLI:

Angular CLI — Part I: Installing and creating a new project

Angular CLI — Part II: Generating Components, Directives, Pipes and Services

Basic Angular app:

Build Angular app:

npm run build

Install Gulp & Gulp-header-comment:

We’ll be using two modules Gulp and Gulp-header-comment to inject the timestamp into JS files. Please read below and follow the links if you are unaware about these modules:

Gulp: gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Gulp-header-comment: gulp-header-comment is a Gulp extension to add comments to file(s) in the pipeline.

Install Gulp & Gulp-header-comment:

npm i gulp gulp-header-comment --save-dev

Gulp & Gulp-header-comment

Create timestamp.js to process and inject the timestamp:

Create a file “timestamp.js” at “package.json” level:

const headerComment = require(‘gulp-header-comment’);

const gulp = require(‘gulp’);

const d = new Date();

console.log(`Server Timestamp: ${d}`);

/* Inject into build */

gulp.src(‘./dist/angular-timestamp/*.js’)

.pipe(headerComment(`${d}`))

.pipe(gulp.dest(‘./dist/angular-timestamp’));

Run following to test the script:

node ./timestamp.js

You’ll notice that timestamp is displayed on console as well as in all JavaScript files:

Timestamp in console & main.js

Automating for each build:

Modify package.json build script to following:

“build”: “ng build && node .\/timestamp.js”,

This will build the app and inject timestamp into JS files. In production, this will the timestamp of Jenkins server or any environment which is used for the build process.

Similarly the script can be modified to inject the timestamp into HTML & CSS files. You can also use modules like svn-info or git-info to inject version control information for each build. This makes it easier for DEV-OPS, Developers or Testers to verify the build when deployed to multiple servers.