How to Containerize an Angular App
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 @email@example.com
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: container_name: # mount current src files and run on node builder (docker-compose up dev) dev: image: 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
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.
Use the following bash alias to start your app with two characters.
alias up='docker-compose up dev