Skip to main content

Angular Container

Setup​

  1. Create base Angular project using ng new

  2. In project’s root, add the following files

    1. Dockerfile
    2. docker-compose.yml
    3. .dockerignore

  3. Build Docker container using Docker cli commands or docker-compose

Docker CLI Commands​

Build container​

docker build -t docker-container-name:dev .

Run previously built container​

Run this command in PowerShell (possibly as Administrator) when executing in Windows OS.

docker run -it --rm -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 4200:4200 -e CHOKIDAR_USEPOLLING=true docker-container-name:dev

Docker Compose Commands​

Build container​

docker-compose up -d --build

Run previously built container​

docker-compose up

Stop running container​

docker-compose stop

Sample package.json​

package.json
{
  "name": "angular-docker-example",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "docker-build": "docker-compose up -d --build",
    "docker-start": "docker-compose up",
    "docker-stop": "docker-compose stop"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Dockerfile​

# pull official base image
FROM node:13.5.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json .
COPY package-lock.json .

# Run the command inside your image filesystem.
RUN npm install
RUN npm install -g @angular/cli@9.1.7

# Add metadata to the image to describe which port the container is listening on at runtime.
EXPOSE 4200

# start app
# Adding --host 0.0.0.0 allowed me to successfully connect to the app once the container started
CMD ng serve --host 0.0.0.0

# Copy the rest of your app's source code from your host to your image filesystem.
COPY . .

.dockerignore​

.dockerignore
.editorconfig
.git
.gitignore
*.md
.nvmrc
dist
Dockerfile
Dockerfile.prod
docker-compose.yml
e2e
node_modules

docker-compose.yml​

version: '3.7'

services:
  angular-docker-example:
    container_name: angular-docker-example
    build:
      context: .
      dockerfile: Dockerfile
    image: angular-docker-example:dev
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 4200:4200
    environment:
      - CHOKIDAR_USEPOLLING=true
    tty: true