Create Docker image for Angular development

According to Angular documentation, we need an LTS version of Node.js as the prerequisite. Most recent LTS Node version at the time I write this post was 14.7.0. Then I found the tag for that version from Node Docker page.

After finding out information, I created a workspace (just a directory) for my up-coming Angular projects.

$ mkdir Angular
$ cd Angular

Then created a sub-directory for Docker related files.

$ mkdir docker
$ cd docker

Inside docker sub-directory I created the Dockerfile (a text document that contains all the commands call on the command line to assemble an Docker image).

$ touch Dockerfile

Dockerfile

FROM node:14.7.0
RUN npm install -g @angular/cli

I use the Docker image of latest Node LTS version at the time as the base image, and install Angular CLI on top of it. Angular CLI is used to create projects, generate various elements in a project, perform development tasks like testing, bundling, and deployment.

Inside docker sub-directory I created shell script to build the Docker image.

$ touch bocker_build.sh

docker_build.sh

#!/bin/bash
docker build -t angular:node-14.7.0 .

I use angular as my Docker image name and node-14.7.0 as the tag. Then it would be easier for me to identify the Node version used in this image.

Run the script to build the Docker image.

$ chmod +x docker_build.sh
$ ./docker_build.sh
# List all available images in host machine
$ docker images

Run Docker container

Then, to run Docker container using the image I created, I wrote another shell script.

$ touch docker_run.sh

docker_run.sh

#!/bin/bash
docker run -it \
    --name angular_dev \
    -v ${PWD}/..:/src \
    -p 4200:4200 \
    angular:node-14.7.0 \
    /bin/bash

Here, I'm starting a Docker container named angular_dev with interactive (-it) bash session (/bin/bash), because I need to attach to that shell session and use Angular CLI. My workspace directory (${PWD}/..) is mounted to container's /src directory so that, I can access projects created within the container from host file system. I bind the port 4200 from container to the same host port. If you want to bind to a different port (4201) in host we can do it like this : -p 4201:4200.

Run the script to run container.

$ chmod +x docker_run.sh
$ ./docker_run.sh
# As docker is run in interactive mode, command line will attach to the shell session in running container

If you exit from the container shell session, the Docker container stops. You can list all your Docker containers using following command.

$ docker ps -a

Create new Angular project from container

First, start the container and attach to its shell session.

# Start the stopped container
$ docker start angular_dev
# Attach to the shell session in container
$ docker attach angular_dev

In container's shell session, run following commands.

# Change directory to mounted volume in container
$ cd /src
# Create new Angular project named my-app using Angular CLI
$ ng new my-app

Now we can access the created Android project from host file system. In container, the project was created by the root user and owner of the created files is the root, so we cannot modify source files from the host file system. As a workaround for this, we change access permissions to all project files from the container so that we can do development of the Angular app from the host.

# From container's shell
$ chmod -R 777 my-app/

Serve Angular app from Docker container

To run the created Angular app in a server and browse it from the host, use following command.

# Change directory to Angular project directory
$ cd my-app/
# Run Angular app in a server comes with Angular CLI.
# It is important to run serve command with --host argument otherwise, we face problems when trying to browse the app from host
$ ng serve --host 0.0.0.0

In host, open up a browser and go to http://localhost:4200.