OpenShift S2I builder image for Angular apps using Angular CLI and Apache httpd 2.4.

Builder image contains a NodeJS / NPM environment to be able to build your Angular application using the angular cli (ng build --prod).

Additionally the apache httpd web container is used during runtime to statically serve the files generated during build phase.

You can directly invoke S2I builds from command line using the S2I binary.

This repository contains an angular app (ng new test-app) in the directory test/test-app that can be used for demo purpose. To build this demo app with S2i simply execute:

s2i build https://github.com/MrGoro/s2i-angular-container.git --context-dir=test/test-app/ schuermann/s2i-angular-container angular-sample-app
docker run -p 8080:8080 angular-sample-app

You can trigger incremental builds by specifying --incremental=true when building an image. Incremental builds provide the already installed node_modules directory from a previous build within a following build. This will dramatically speed up installation of NodeJS dependencies.

s2i build https://github.com/MrGoro/s2i-angular-container.git --incremental=true --context-dir=test/test-app/ schuermann/s2i-angular-container angular-sample-app
docker run -p 8080:8080 angular-sample-app

For dynamic languages like PHP, Python, or Ruby, the build-time and run-time environments are the same. In this case using the builder as a base image for a resulting application image is natural.

For compiled languages like C, C++, Go, or Java, the dependencies necessary for compilation might dramatically outweigh the size of the actual runtime artifacts, or provide attack surface areas that are undesirable in an application image. See S2I Docs - How to use a non-builder image for the final application image.

The same applies to Angular Apps that are compiled using a full NodeJS / NPM environment and a lot of dependencies (node_modules). During runtime they are served as static web pages from a web container with no need for NodeJS, the application source and all dependencies.

To use a different image for runtime, you can do the following with S2I:

s2i build https://github.com/MrGoro/s2i-angular-container.git --context-dir=test/test-app/ schuermann/s2i-angular-container angular-sample-app --runtime-image <runtime-image> --runtime-artifact </path/to/artifact>

For example to run the built app using nginx you could use the following:

s2i build https://github.com/MrGoro/s2i-angular-container.git --context-dir=test/test-app/ schuermann/s2i-angular-container angular-sample-app --runtime-image nginx --runtime-artifact /opt/app-root/src:/usr/share/nginx/html

To use the builder image in your OpenShift environment you can import this simple image stream by creating the objects inside angular-s2i-httpd.json using the OC binary:

oc create -f angular-s2i-httpd.json

To make the image stream globally availiable use the namespace openshift

oc create -f angular-s2i-httpd.json -n openshift

To activate incremental builds in OpenShift, edit the build configuration (YAML) and insert incremental: true inside spec:strategy:sourceStrategy:

  strategy:
    type: Source
    sourceStrategy:
      from:
        kind: ImageStreamTag
        namespace: angular
        name: 'angular:latest'
      incremental: true