Running Angular Development Server

Before running our development server, let’s break down the

Dockerfile and docker-compose.yml files

This is pretty straight forward, so let’s recap this quickly

Set the base image to be the latest node:alpine for minimum image size

for minimum image size Install @angular/cli globally, any other global tools goes into this layer

globally, any other global tools goes into this layer Copy and install localy npm packages

Copy the remaining source code, this is the layer that changes the most.

It’s important to note that there is a .dockerignore file that prevents certain file and file formats from being copied.

Port Mapping

Angular’s development server default port is 4200, so we map the host’s port to the container’s one.

Volumes

As a thumb rule, we should try avoiding large volumes, this is the reason we don’t map the entire directory or node_modules directory.

You probably noticed the :cached at the end of the first volumes, with this we tell docker whether the host or the container is authoritative.

In general, we have two options, :cached the host to be authoritative, or :delegated where we want the container to be authoritative.

Put simply, authoritative means which view has higher preference of being updated.

These are the minimum files that I decided to volume, feel free to add other files and volumes.

Entrypoint

This is where we override the image’s ENTRYPOINT if it had one.

We use the regular ng serve with 2 flags:

--host 0.0.0.0 which tells angular-cli to not use localhost , we need to specify this in order to access the development server from our browser.

which tells angular-cli to not use , we need to specify this in order to access the development server from our browser. --poll 1 tells angular-cli to poll changes every 1 millisecond

Read more about docker-compose.yml file here

Running

We fire up the development server by running

docker-compose up -d --build

The flags set docker-compose to run in detached mode and recreate our image if it’s already built.

Now we can inspect the logs with docker-compose logs -f dev

After the server successfully started run docker-machine ip , browse to the returned ip at port 4200, trigger some changes and voila, the page reloads!