Build Angular container images with buildpacks

Introduction

Cloud Native Buildpacks transform your application source code into images that can run on any cloud. Lets see how to use buildpacks to build an Angular application.

Create a new Angular application

Install Angular cli.

sudo npm install -g @angular/cli

Generate a new application.

ng new angular-buildpack
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

Install pack

Follow pack installation guide to install pack.

(curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.27.0/pack-v0.27.0-linux.tgz" | sudo tar -C /usr/local/bin/ --no-same-owner -xzv pack)

Build a container image

Packeto build packs are used to build the image container. BP_NODE_RUN_SCRIPTS should be set to the name of the build script for building for production. BP_WEB_SERVER_ROOT should be set to the build output directory from the build script. And nginx is used for the web server.

pack build angular-buildpack \
  --buildpack paketo-buildpacks/web-servers \
  --env BP_NODE_RUN_SCRIPTS=build \
  --env BP_WEB_SERVER=nginx \
  --env BP_WEB_SERVER_ROOT=dist/angular-buildpack \
  --builder paketobuildpacks/builder:base

Run the built container image

docker run --rm -d --name angular-buildpacks --env PORT=8080 --publish 8080:8080 angular-buildpack
87a1ce03ee956acfa8d14fc1226670736d62c007fc94031da77f338be8e090d8

Check if the container is running:

docker ps
CONTAINER ID   IMAGE                            COMMAND                  CREATED         STATUS        PORTS                                       NAMES
87a1ce03ee95   angular-buildpack                "/cnb/process/web"       2 seconds ago   Up 1 second   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   angular-buildpacks

Open the application in browser

google-chrome http://localhost:8080