Microservices Project: Part 1 — Frontend

2 min readMay 11, 2016

So, as the first part of my little project, I wanted to have a small frontend with just the basic stuff needed. A login screen, and a registration screen which will also serve as an edit screen for registered users.

I wanted to use Angular, so basically I only needed a webserver, like Nginx or Apache, but I also wanted to use Angular Material Design, so I checked Angular Material-Start and it’s prerequisites.

Like most modern apps, it uses node and it’s npm to manage dependencies, it also includes node live-server to serve the app files, so it can be used as a development environment, but it won’t be enough when deploying to production.

So, for our first docker image, we need a node capable image, so I’ll use the official image for the current LTS version of Node.js.

Let’s start building the Dockerfile for this container, based on Node.js guide to Dockering a web app:

FROM node:argon

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

EXPOSE 8080

CMD ["node","node_modules/live-server/live-server.js"]

Let’s do quick review of what each section does:

Select the base image and tag for our image.
Create a directory inside the Docker image and set it as the default WORKDIR (the following RUN commands will be run from this directory.
Copy the packages.json file to the working directory and install the project dependencies.
Copy the remaining code to the working directory.
Expose port 8080 that’s used by http-server
Run http-server so we can access the app.

As usual, things don’t go as planned and when I tried to build the container, I got the following error:

npm ERR! Host key verification failed.

This happened because some components are retrieved using SSH from GitHub, and you need to have an SSH key added to your GitHub account. You can follow this tutorial to do this.

Also you need to add the public key to the container, with the correct permissions, and add the corresponding entry to the container known_hosts file, you can do this adding the following lines to the Dockerfile before the npm install command.

# Install github key to known_hosts
RUN mkdir -p /root/.ssh
ADD id_rsa /root/.ssh/
RUN chmod 400 /root/.ssh/id_rsa \
    && touch /root/.ssh/known_hosts \
    && ssh-keyscan github.com >> /root/.ssh/known_hosts

After this I could use the following commands to build the image, with the microservices-frontend tag and run the container forwarding port 8080.

docker build -t microservices-frontend .
docker run -p 8080:8080 microservices-frontend

Then you can access the app with a browser on this URL: http://docker:8080/app/

All the code is available on this GitHub repository: https://github.com/fresnizky/microservices-frontend

Microservices Project: Part 1 — Frontend

Written by Federico Resnizky