Dockerize your Angular development environment

Ahmed Shibli
Jul 20, 2019 · 2 min read

Preparing a node development environment is not so complex. But it becomes harder if you work on multiple version of node. Especially if you have some legacy node application, and you can’t update the node because of some dependencies, docker is very handy in this situation. I’ll show the steps of building a docker image and configure docker-compose to build and run the development server with hot-reload.

Prepare docker image

Add a Dockerfile at the root of the project directory

# we choose the lts version
FROM node:lts
LABEL maintainer="shibli049.com"# set working directory
WORKDIR /app
# copy and install app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@latest
# add app
COPY . /app
EXPOSE 4200# start app
CMD ["ng", "serve", "--host", "0.0.0.0"]

Add .dockerignore file

.git
.gitignore

If you have local node_modules/ you can add it to the .dockerignore. This file will speed up the build process, as it will prevent adding our git-repo(and node_modules) to the docker image.

Now you can build the image with:

docker build -t ng-development .

And run the image

docker run -v ${PWD}:/app -p 4200:4200 --rm ng-development

We are mounting the current directory to the container so that when we change any file container will get it immediately.

You can browse it by going to http://localhost:4200/.

Prepare docker-compose

If you want to use docker-compose, add a docker-compose.yml file at the root of your project folder.

version: '3.7'services:
ng-development:
image: ng-development
container_name: ng-development
restart: unless-stopped
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
ports:
- "4200:4200"

If you have local node_modules/ add - '/app/node_modules' this line after — '.:/app' line in volumes.

And, you can run this with docker-compose up -d --buildif you want to run this in the foreground, you can remove -d and if you don’t want to build your image before running remove --build and your development environment is ready.

Go to http://localhost:4200/ from your browser, and made some change in your code. And your browser will load the changes automatically.

If you need, this full source can be found here on the GitHub.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store