Dockerize Your Angular CLI Project

Why docker?

Microservices

Microservices it is architecture pattern where project divided to self containing parts which can be run or test independently (as service). Docker makes you able to package parts of your projects and run them together.
Lets name some basic terminus of docker:

Image

Environment of some sort of machine (e.g. Ubuntu) with some tools preinstalled (e.g. node)

Container

One or more images composition that can be run with some parameters.
Containers can be easy moved to different environments like develop, qa or production(thats grate advantage of docker).

Example

Lets create simple container with which all members of your team will be able to start develop angular4 app with one singe command:

Lets create an image

To create an image you must add Dockerfile

# Create image based on the official Node 7.6.0 image from dockerhub
FROM node:7.6.0

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

since you don't want to copy node_modules you also need to add .dockerignore

node_modules/

After the files added to project only thing left is to run "build" command

docker build -t angular-client:dev .

after image created you can run it with following params:

docker build -t angular-client:dev .

Thats all - angular-client image created

Run the container

to get container running you can use following command:

docker run -it --volume=/Users/your-user/your-directory/your-project:/localDebugRepo -p 4200:4200  --workdir="/localDebugRepo" --memory=4g --memory-swap=4g --entrypoint=/bin/b
ash angular-client:dev

This command makes you able to log into your container machine now you can run app with following command:

npm start

Now you can view the app running on localhost:4200