I can’t believe it’s been over 2 years since I first wrote about Using Angular CLI to create Angular 2 applications in Docker. We use Docker to run every line of code that moves through SimBco. We work with so many different clients and environments our world would be a mess without it. Some of these apps are huge enterprise apps that have been running for years. Some of them are marketing sites that will only live for a few months. We even use it to test the extensions we write for our Facebook Messenger Marketing!

Our original article was written for Angular 2 when it was fresh and new. Obviously we are a long way down the path now, and a couple things have changed. So I wanted to create a post really quick to get you the update. I just used this to create a project a few minutes ago so I know it should be current 🙂

Without further ado, create a new directory for our project to live inside and create a new file named Dockerfile.

FROM node:8-alpine

ENV HOME=/usr/src/app
RUN mkdir -p $HOME
WORKDIR $HOME

RUN yarn global add @angular/cli

EXPOSE 4200

USER 1000

I found it is better to prefix the version of node so that you don’t get unexpected version differences between new team members coming on line.

Next we want to create a docker-compose.yml file which will define our service we will use to execute the build commands and run our development web server inside.

node:
    build: .
    ports:
        - "4200:4200"
    volumes:
        - .:/usr/src/app
    command: yarn run start

Also even though this project is client facing only I went with a generic “node” service name. This has allowed us to use consistent commands in project with a Node.js backend and an Angular front end.

The final step is to build our image so we can use it to run containers.

docker-compose build

Now we have an environment which we can execute JS and create our project. Because we want to create our project into this directory the command to create the project is just a little more complicated than what you would normally run.

docker-compose run --rm node ng new --directory=./  --skip-install my-app-name
docker-compose run --rm node yarn

These two commands will allow you to create a new Angular project inside the current directory named `my-app-name` then install all the dependencies required.

The only configuration change required to this code because of our docker environment is to update the start script to bind to all interfaces. Please edit this line in our package.json file

...
"start": "ng serve --host 0.0.0.0",
...

Finally we just need to start the watcher and development web server

docker-compose up

This will compile the project and start a development web server running on http://localhost:4200/.  Fire up your browser and give that page a look. Congratulations! You created a fresh Angular project, compiled it and ran it in your browser.


At SimBco we have lots of fun writing code and solving business problems. If your team needs help implementing Angular or Docker in your projects drop us a line. We would love to help!

Get Docker or Angular Help


Share This