Create a MEAN app with Angular 2 and Docker Compose

Ganga Chris
πŸ‘οΈ 97,699 views
πŸ’¬ comments

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.

We'll build an angular app in one container, point it to an expressjs api in another container, which connects to MongoDB in another container.

Table of Contents

    If you haven't worked with Docker before, this would be a good starting point as we will explain every step covered, in some detail.

    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

    You need to have docker installed in your setup. Instructions for installing docker in your given platform can be found here.

    Verify your installation by running

    $ docker  -v
    Docker version 1.12.3, build 6b644ec

    Next, you need to know how to build a simple Angular 2 app and an Express App. We'll be using the Angular CLI to build a simple app. So install the Angular CLI

    $ npm install -g angular-cli

    Single Builds Approach

    We'll now separately build out these three parts of our app. The approach we are going to take is building the app in our local environment, then dockerizing the app.

    Once these are running, we'll connect the three docker containers. Note that we are only building two containers, Angular and the Express/Node API. The third container will be from a MongoDB image that we'll just pull from the Docker Hub.

    Docker Hub is a repository for docker images. It's where we pull down official docker images such as MongoDB, NodeJs, Ubuntu, and we can also create custom images and push them to Docker Hub for other people to pull and use.

    Let's create a directory for our whole set up, we'll call it mean-docker.

    $ mkdir mean-docker

    Angular 2 Client App

    Next, we'll create an Angular 2 app and make sure it runs in a docker container.

    Create a directory called angular-client inside the mean-docker directory we created above, and initialize an Angular 2 App with the Angular CLI.

    $ mkdir angular-client
    $ cd angular-client
    $ ng init

    This scaffolds an angular app, and npm installs the app's dependencies. Our directory structure should be like this

    └── mean-docker
        └── angular-client
            β”œβ”€β”€ README.md
            β”œβ”€β”€ angular-cli.json
            β”œβ”€β”€ e2e
            β”œβ”€β”€ karma.conf.js
            β”œβ”€β”€ node_modules
            β”œβ”€β”€ package.json
            β”œβ”€β”€ protractor.conf.js
            β”œβ”€β”€ src
            └── tslint.json

    Running ng serve, inside the angular-client directory should start the angular app at http://localhost:4200.

    Dockerizing Angular 2 Client App

    To dockerize any app, we usually need to write a Dockerfile

    A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

    To quickly brainstorm on what our angular app needs in order to run,

    1. We need an image with nodejs installed on it
    2. We could have the Angular CLI installed on the image, but the package.json file has it as a dependency, so it's not a requirement.
    3. We can add our angular app into the image and install it's dependencies.
    4. It needs to expose port 4200 so that we can access it from our host machine through localhost:4200.
    5. If all these requirements are met, we can run npm start in the container, which in turn runs ng serve since it's a script in the package.json file, created from the image and our app should run.

    Those are the exact instructions we are going to write in our Dockerfile.

    mean-docker/angular-client/Dockerfile

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

    I've commented on the file to show what each instruction clearly does.

    NOTE Before we build the image, if you are keen, you may have noticed that the line COPY . /usr/src/app copies our whole directory into the container, including node_modules. To ignore this, and other files that are irrelevant to our container, we can add a .dockerignore file and list what is to be ignored. This file is usually sometimes identical to the .gitignore file.

    Create a .dockerignore file.

    mean-docker/angular-client/.dockerignore

    node_modules/

    One last thing we have to do before building the image, is to ensure that the app is served from the host created by the docker image. To ensure this, go into your package.json and change the start script to.

    mean-docker/angular-client/package.json

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

    To build the image we will use docker build command. The syntax is

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

    Make sure you are in the mean_docker/angular-client directory, then build your image.

    $ cd angular-client
    $ docker build -t angular-client:dev .

    -t is a shortform of --tag, and refers to the name or tag given to the image to be built. In this case the tag will be angular-client:dev.

    The . (dot) at the end refers to current directory. Docker will look for the Dockerfile in our current directory and use it to build an image.

    This could take a while depending on your internet connection.

    Now that the image is built, we can run a container based on that image, using this syntax

    $ docker run -d --name <container_name> -p <host-port:exposed-port>  <image-name>

    The -d flag tells docker to run the container in detached mode. Meaning, it will run and get you back to your host, without going into the container.

    $ docker run -d --name angular-client -p 4200:4200 angular-client:dev
    8310253fe80373627b2c274c5a9de930dc7559b3dc8eef4abe4cb09aa1828a22

    --name refers to the name that will be assigned to the container.

    -p or --port refers to which port our host machine should point to in the docker container. In this case, localhost:4200 should point to dockerhost:4200, and thus the syntax 4200:4200.

    Visit localhost:4200 in your host browser should be serving the angular app from the container.

    You can stop the container running with

    $ docker stop angular-client

    Dockerize the Express Server API

    We've containerized the angular app, we are now two steps away from our complete set up.

    Containerizing an express app should now be straight forward. Create a directory in the mean-docker directory called express-server.

    $ mkdir express-server

    Add the following package.json file inside the app.

    mean-docker/express-server/package.json

    {
      "name": "express-server",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "start": "node server.js"
      },
      "dependencies": {
        "body-parser": "~1.15.2",
        "express": "~4.14.0"
      }
    }

    Then, we'll create a simple express app inside it. Create a file server.js

     $ cd express-serve
     $ touch server.js
     $ mkdir routes && cd routes
     $ touch api.js

    mean-docker/express-server/server.js

    // Get dependencies
    const express = require('express');
    const path = require('path');
    const http = require('http');
    const bodyParser = require('body-parser');
    
    // Get our API routes
    const api = require('./routes/api');
    
    const app = express();
    
    // Parsers for POST data
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    
    // Set our api routes
    app.use('/', api);
    
    /**
     * Get port from environment and store in Express.
     */
    const port = process.env.PORT || '3000';
    app.set('port', port);
    
    /**
     * Create HTTP server.
     */
    const server = http.createServer(app);
    
    /**
     * Listen on provided port, on all network interfaces.
     */
    server.listen(port, () => console.log(`API running on localhost:${port}`));

    mean_docker/express-server/routes/api.js

    const express = require('express');
    const router = express.Router();
    
    /* GET api listing. */
    router.get('/', (req, res) => {
        res.send('api works');
    });
    
    module.exports = router;

    This is a simple express app, install the dependencies and start the app.

    $ npm install
    $ npm start

    Going to localhost:3000 in your browser should serve the app.

    To run this app inside a docker container, we'll also create a Dockerfile for it. It should be pretty similar to what we already have for the angular-client.

    mean-docker/express-server/Dockerfile

     # Create image based on the official Node 6 image from the 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 3000
    
    # Serve the app
    CMD ["npm", "start"]

    You can see the file is pretty much the same as the angular-client Dockerfile, except for the exposed port.

    You could also add a .dockerignore file to ignore files we do not need.

    mean-docker/express-server/.dockerignore

     node_modules/

    We can then build the image and run a container based on the image with.

    $ docker build -t express-server:dev .
    $ docker run -d --name express-server -p 3000:3000 express-server:dev

    Going to localhost:3000 in your browser should serve the api.

    Once you are done, you can stop the container with

    $ docker stop express-server

    MongoDB container

    The last part of our MEAN set up, before we connect them all together is the MongoDB. Now, we can't have a Dockerfile to build a MongoDB image, because one already exists from the Docker Hub. We only need to know how to run it.

    Assuming we had a MongoDB image already, we'd run a container based on the image with

    $ docker run -d --name mongodb -p 27017:27017 mongo

    The image name in this instance is mongo, the last parameter, and the container name will be mongodb.

    Docker will check to see if you have a mongo image already downloaded, or built. If not, it will look for the image in the Dockerhub. If you run the above command, you should have mongodb instance running inside a container.

    To check if mongodb is running, simply go to http://localhost:27017 in you browser, and you should see this message. It looks like you are trying to access MongoDB over HTTP on the native driver port.

    Alternatively, if you have mongo installed in your host machine, simply run mongo in the terminal. And it should run and give you the mongo shell, without any errors.

    Docker Compose

    To connect and run multiple containers with docker, we use Docker Compose.

    Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a Compose file to configure your application’s services. Then, using a single command, you create and start all the services from your configuration.

    Docker compose is usually installed when you install docker. So to simply check if you have it installed, run

    $ docker-compose

    You should see a list of commands from docker-compose. If not, you can go through the installation here

    Note: Ensure that you have docker-compose version 1.6 and above by running docker-compose -v

    Create a docker-compose.yml file in the root of our set up.

    $ touch docker-compose.yml

    Our directory tree should now look like this.

    .
    β”œβ”€β”€ angular-client
    β”œβ”€β”€ docker-compose.yml
    └── express-server

    Then edit the docker-compose.yml file

    mean-docker/docker-compose.yml

    version: '2' # specify docker-compose version
    
    # Define the services/containers to be run
    services:
      angular: # name of the first service
        build: angular-client # specify the directory of the Dockerfile
        ports:
          - "4200:4200" # specify port forewarding
    
      express: #name of the second service
        build: express-server # specify the directory of the Dockerfile
        ports:
          - "3000:3000" #specify ports forewarding
    
      database: # name of the third service
        image: mongo # specify image to build container from
        ports:
          - "27017:27017" # specify port forewarding

    The docker-compose.yml file is a simple configuration file telling docker compose which continers to build. That's pretty much it.

    Now, to run containers based on the three images, simply run

    $ docker-compose up

    This will build the images if not already built, and run them. Once it's running, and your terminal looks something like this.

    You can visit all the three apps, http://localhost:4200, http://localhost:3000 or mongodb://localhost:27017, and you'll see that all the three containers are running.

    Connecting the 3 Docker containers

    Finally, the fun part.

    Express and MongoDb

    We now finally need to connect the three containers. We'll first create a simple CRUD feature in our api using mongoose. You can go through Easily Develop Node.js and MongoDB Apps with Mongoose to get a more detailed explanation of mongoose.

    First of all, add mongoose to your express server package.json

    mean-docker/express-server/package.json

    {
      "name": "express-server",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "start": "node server.js"
      },
      "dependencies": {
        "body-parser": "~1.15.2",
        "express": "~4.14.0",
        "mongoose": "^4.7.0"
      }
    }

    We need to update our api to use mongo

    mean-docker/express-server/routes/api.js

    // Import dependencies
    const mongoose = require('mongoose');
    const express = require('express');
    const router = express.Router();
    
    // MongoDB URL from the docker-compose file
    const dbHost = 'mongodb://database/mean-docker';
    
    // Connect to mongodb
    mongoose.connect(dbHost);
    
    // create mongoose schema
    const userSchema = new mongoose.Schema({
      name: String,
      age: Number
    });
    
    // create mongoose model
    const User = mongoose.model('User', userSchema);
    
    /* GET api listing. */
    router.get('/', (req, res) => {
            res.send('api works');
    });
    
    /* GET all users. */
    router.get('/users', (req, res) => {
        User.find({}, (err, users) => {
            if (err) res.status(500).send(error)
    
            res.status(200).json(users);
        });
    });
    
    /* GET one users. */
    router.get('/users/:id', (req, res) => {
        User.findById(req.param.id, (err, users) => {
            if (err) res.status(500).send(error)
    
            res.status(200).json(users);
        });
    });
    
    /* Create a user. */
    router.post('/users', (req, res) => {
        let user = new User({
            name: req.body.name,
            age: req.body.age
        });
    
        user.save(error => {
            if (error) res.status(500).send(error);
    
            res.status(201).json({
                message: 'User created successfully'
            });
        });
    });
    
    module.exports = router;
    

    Two main differences, first of all our connection to mongo db is in the line const dbHost = 'mongodb://database/mean-docker';. This database is the same as the database service we created in the docker-compose file.

    We've also added rest routes GET /users, GET /users/:id and POST /user.

    Update the docker-compose file, telling the express service to link to the database service.

    mean-docker/docker-compose.yml

    version: '2' # specify docker-compose version
    
    # Define the services/containers to be run
    services:
      angular: # name of the first service
        build: angular-client # specify the directory of the Dockerfile
        ports:
          - "4200:4200" # specify port forewarding
    
      express: #name of the second service
        build: express-server # specify the directory of the Dockerfile
        ports:
          - "3000:3000" #specify ports forewarding
        links:
          - database # link this service to the database service
    
      database: # name of the third service
        image: mongo # specify image to build container from
        ports:
          - "27017:27017" # specify port forewarding

    The links property of the docker-compose file creates a connection to the other service with the name of the service as the host name. In this case database will be the hostname. Meaning, to connect to it frrom the express service, we should use database:27017. That's why we made the dbHost equal to mongodb://database/mean-docker.

    Angular 2 and Express

    The last part is to connect the Angular app to the express server. To do this, we'll need to make some modifications to our angular 2 app to consume the express api.

    mean-docker/angular-client/src/app/app.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Http } from '@angular/http';
    
    // Import rxjs map operator
    import 'rxjs/add/operator/map';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      title = 'app works!';
    
      // Link to our api, pointing to localhost
      API = 'http://localhost:3000';
    
      // Declare empty list of people
      people: any[] = [];
    
      constructor(private http: Http) {}
    
      // Angular 2 Life Cycle event when component has been initialized
      ngOnInit() {
        this.getAllPeople();
      }
    
      // Add one person to the API
      addPerson(name, age) {
        this.http.post(`${this.API}/users`, {name, age})
          .map(res => res.json())
          .subscribe(() => {
            this.getAllPeople();
          })
      }
    
      // Get all users from the API
      getAllPeople() {
        this.http.get(`${this.API}/users`)
          .map(res => res.json())
          .subscribe(people => {
            console.log(people)
            this.people = people
          })
      }
    }

    Angular 2 style guides usually recommends separating most logic into a service/provider. We've placed all the code in the component here for brevity.

    We've imported the OnInit interface, to call events when the component is initialized, then added a two methods AddPerson and getAllPeople, that call the API.

    Notice that this time round, our API is pointing to localhost. This is because while the angular 2 app will be running inside the container, it's served to the browser. And the browser is the one that makes request. It will thus make a request to the exposed express API. As a result, we don't need to link Angular and Express in the docker-compose.yml file.

    Next, we need to make some changes to the template. I first added bootstrap via cdn to the index.html

    mean-docker/angular-client/src/app/index.html

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Angular Client</title>
      <base href="/">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <!-- Bootstrap CDN -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root>Loading...</app-root>
    </body>
    </html>

    Then update the app.component.html template

    mean-docker/angular-client/src/app/app.component.html

    <!-- Bootstrap Navbar -->
    <nav class="navbar navbar-light bg-faded">
      <div class="container">
        <a class="navbar-brand" href="#">Mean Docker</a>
      </div>
    </nav>
    
    <div class="container">
      <div [style.margin-top.px]="10" class="row">
        <h3>Add new person</h3>
        <form class="form-inline">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" #name>
          </div>
          <div class="form-group">
            <label for="age">Age</label>
            <input type="number" class="form-control" id="age" #age>
          </div>
          <button type="button" (click)="addPerson(name.value, age.value)" class="btn btn-primary">Add person</button>
        </form>
      </div>
      <div [style.margin-top.px]="10" class="row">
        <h3>People</h3>
        <!-- Bootstrap Card -->
        <div [style.margin-right.px]="10" class="card card-block col-md-3" *ngFor="let person of people">
          <h4 class="card-title">{{person.name}}  {{person.age}}</h4>
        </div>
      </div>
    </div>

    The above template shows the components properties and bindings. We are almost done.

    Since we've made changes to our code, we need to do a build for our Docker Compose

    $ docker-compose up --build

    The --build flag tells docker compose that we've made changes and it needs to do a clean build of our images.

    Once this is done, go to localhost:4200 in your browser,

    We are getting a No 'Access-Control-Allow-Origin' error. To quickly fix this, we need to enable Cross-Origin in our express app. We'll do this with a simple middleware.

    mean-docker/express-server/server.js

    // Code commented out for brevity
    
    // Parsers for POST data
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    
    // Cross Origin middleware
    app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*")
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
      next()
    })
    
    // Set our api routes
    app.use('/', api);
    
    // Code commented out for brevity

    We can now run docker-compose again with the build flag. You should be in the mean-docker directory

    $ docker-compose up --build

    Going to localhost:4200 on the browser.

    Conclusion

    I bet you've learned a thing or two about MEAN or docker and docker-compose.

    The problem with our set up however is that any time we make changes to either the angular app, or the express api, we need to run docker-compose up --build.

    This can get tidious or even boring over time. We'll look at this in the another article.

    Ganga Chris

    10 posts

    I'm a Full Stack Developer. (Mostly JavaScript & Go). Recently got into Blockchain tech.