Static Content

Build, Package and Deploy with GTM ID

In this example, a React App, with Typescript, is built and package, then deployed to a Content Delivery Network. As there is no server side component to configure for environment differences, an alternate strategy is used.

alt text alt text

Subsections of Static Content

Tokenisation

Abstraction of Application Settings

As the application is static content, runtime variables are not applicable, however, variations in the application configuration at deploy time can, on occasions, be applicable, e.g. using a different Google Tag Manager (GTM) for production and non-production environments to ensure the analytics are not contaminated.

Within source control there are two tokens applied. The first is a build-time token, which captures the semantic version. This is constructed from a release prefix and build number. This ensure from a user/tester perspective, the running asset can be verified to build that created it.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
        Class B campervan comparison tool version @semver@

The second token is the GTM ID, this is deploy-time token.

<!DOCTYPE html>
<html lang="en">
  <head>

	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','@gtm-id@');</script>
	<!-- End Google Tag Manager -->

Continuous Integration (CI)

Build & Package Once

The primary driver file for CDAF is the CDAF.solution file. The directory containing this file is the SOLUTIONROOT. The mandatory properties are solutionName and artifactPrefix.

solutionName=classbwizard
productName=React Class B Recreational Vehicle Comparison Tool
artifactPrefix=0.5

Build Process

The CDAF Execution Engine is used to reduce the cognitive load, allowing the engineer to focus on the primary objective, and not have to cater for logging, exception and error handling. In this example, the build.tsk file is not placed in the project sub-directory, instead this is placed in the solution root. The reason for this is that the project sub-directory is copied to a temporary directory for the build, because the source code is manipulated prior to the build and it this should not be mistakenly committed to source control.

Note the construction of semver, combined from source control major & minor version, with build number suffix to ensure version is unique and traceable.

REFRSH ./spa/src ./temp/src
REFRSH ./spa/public ./temp/public
VECOPY ./spa/*.json ./temp
cd ./temp

ASSIGN $semver="${artifactPrefix}.${BUILDNUMBER}"
REPLAC src/App.js @semver@ $semver

npm install
npm run build

alt text alt text

Only the compiled output is retained in the release package, as defined in storeForLocal

temp/build/

alt text alt text

Continuous Delivery (CD)

Deploy Many

The continuous delivery has multiple phases, first is a closed-loop test, then are the runtime environments, which are promoted, starting with acceptance test.

Closed-Loop Test

This first delivery stage used docker-compose to stand-up, test and tear-down an environment. This environment is transient and not accessible by manual testers.

services:
  classb:
    image: "${CLASSB_TAG}"
    ports:
      - "8000:8000"
  test:
    image: "${TEST_TAG}"
    volumes:
      - ${WORK_SPACE}:/solution/workspace
    links:
      - classb:classb
    depends_on:
      - classb

alt text alt text

Release Promotion

After the closed-loop tests have passed, then the deployment to user acceptance test is performed. In source control, the configuration management table defines the target environments and their GTM ID.

The GTM ID publicly accessible in the static content, and therefore does not need to be managed as a secret, i.e. can be plain text in source control.

context  target  deployTaskOverride       github_repo             gtm_id
local    TEST    push-static-content.tsk  classb-test.opennz.org  G-JM71HCEG2Q
local    PROD    push-static-content.tsk  classb.opennz.org       GTM-5VSBHSV

At deploy-time the GTM ID for the target environment is detonised in the static content before pushing it to the content delivery network CDN.

alt text alt text

The release includes both the build-time and deploy-time detokenised content.

alt text alt text