How to Containerize an Angular App

In continuation of my previous post, I will be writing about how to use Docker to containerize an Angular app! JavaScript frameworks are great applications to containerize since they change rapidly! Using Docker will improve the longevity of your application. Developers will have no issues running it several years down the line. Starting the project will be as easy as running one line of code. Let's get started!

TLDR: Here is a link to my git repo for this post: Angular Docker Intro

1. Install Angular CLI locally & Create Project

First, let's create a new Angular project from scratch. This is an optional step, but as I previously stated I like to get apps running without Docker first. This is useful when you can't get your container to run.

npm install -g @angular/cli
ng new docker-app
cd docker-app
ng serve

If you get this working to navigate to localhost:4200 and you should see your app running! That's great! Now kill the app and let's containerize it!

3. Create a Dockerfile

Next, let's create a Dockerfile to create our "base" image

# Step 1: Build the app in image 'builder'
FROM node:12-alpine AS node_builder

RUN set -xe \
    && apk add --no-cache bash git openssh \
    && npm install -g npm \
    && git --version && bash --version && ssh -V && npm -v && node -v && yarn -version

WORKDIR /usr/src/app

# install and cache app dependencies
COPY package*.json ./
COPY angular.json /usr/src/app/angular.json
COPY tsconfig*.json ./

RUN npm install
RUN npm install -g @angular/cli@10.0.0

Note: I explicitly use the Angular CLI version that matches what's in package.json. This may be different for you!

4. Create a docker-compose.yml

Now that we have Dockerfile to build a "base image", we should start to build out our docker-compose file. This will give us the ability to be able to build the "base image" and run our app in the container.

x-config:
  - &NODE_BUILDER "node/builder:0.0.1"
  - &CONTAINER_NAME "angular-container"
  - &BUILDER_CONTAINER_NAME "node-builder"
version: '3.7'

services:
  # build a node server image to run our code on (docker-compose build node)
  node:
    build:
      context: .
      dockerfile: Dockerfile
    image: *NODE_BUILDER
    container_name: *BUILDER_CONTAINER_NAME
  # mount current src files and run on node builder (docker-compose up dev)
  dev:
    image: *NODE_BUILDER
    container_name: *CONTAINER_NAME
    ports:
      - '4200:4200'
    volumes:
      - ./src:/usr/src/app/src
    command: ng serve --host 0.0.0.0 --poll 200

5. Build a Base Image

Let's build the base image!

docker-compose build node

6. Start Angular!

Finally, we can run our containerized Angular App!

docker-compose up dev

Conclusion

That's it! You now have a containerized Angular App! Remember to bump the NODE_BUILDER version and push a new base image any time dependencies change! This means anytime you update package.json there needs to be a new base image.

Pro Tip

Use the following bash alias to start your app with two characters.

alias up='docker-compose up dev

How to Containerize an Angular App

Comments (1)

Can You Containerize It?

How to Containerize Express.js

More from this blog

Mitigating the Log4J Vulnerability in Spring Boot

When to Use AWS CDK Constructs vs Stacks

AWS Lambda - Query Amazon RDS using Secrets

Types in TypeScript

What is Serverless?

1. Install Angular CLI locally & Create Project

3. Create a Dockerfile

4. Create a docker-compose.yml

5. Build a Base Image

6. Start Angular!

Conclusion

Pro Tip

Command Palette

Comments (1)

Can You Containerize It?

How to Containerize Express.js

More from this blog

1. Install Angular CLI locally & Create Project

3. Create a Dockerfile

4. Create a docker-compose.yml

5. Build a Base Image

6. Start Angular!

Conclusion

Pro Tip