Creating MEAN app with Angular 2 and Docker Compose

Docker allows us to run applications inside containers. These containers in most cases communicate with each other.

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

Why Use Docker

1. Docker images usually include only what your application needs to run. As a result, you don't have to worry about having a whole operating system with things you will never user. This results in smaller images of your application.
2. Platform Indipendent - I bet you've heard of the phrase 'It worked on my machine, and doesn't work on the server'. With Docker, all either environments need to have is the Docker Engine, or the Docker Daemon, and when we have a successful build of our image, it should run anywhere.
3. Once you have an image of your application built, you can easily share the image to anyone who wants to run your application. They need not worry about dependencies, or setting up their individual environments. All they need to have is Docker Engine installed.
4. Isolation - You'll see from the article that I try to separate the individual apps to become indipendent, and only point to each other. The reason behind this is that each part of our entire application should be somewhat indipendent, and scalable on it's own. Docker in this instance would make scaling these individual parts as easy as spinning up another instance of their images. This concept of building isolated, indipendenlty scalable parts of an entire system is what is called Microservices Approach.You can read more about it in Introduction to Microservices
5. Docker images usually have tags, referring to their versions. This means you can have versioned builds of your image, enabling you to roll back to a previous version should something unexpected break

Prerequisites

$ docker  -v
Docker version 1.12.3, build 6b644ec

npm install -g angular-cli

mkdir mean-docker

mkdir angular-client

cd angular-client

ng init

run: ng serve (application runs on http://localhost:4200)

create Dockerfile inside angular-client

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

# 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"]

create dockerignore

node_modules/

in package.json add these 

{
 ...
  "scripts": {
    "start": "ng serve -H 0.0.0.0",
    ...
  },
  ...
}

docker build -t <image_tag>:<tag> <directory_with_Dockerfile>

$ cd angular-client
$ docker build -t angular-client:dev .
docker run -d --ndocker run -d --name angular-client -p 4200:4200 angular-client:dev
8310253fe80373627b2c274c5a9de930dc7559b3dc8eef4abe4cb09aa1828a22ame <container_name> -p <host-port:exposed-port>  <image-name>
docker stop angular-client


#PART 2 COMING SOON