Microservices Project: Part 1 — Frontend

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:

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

--

--

PHP Developer, Cloud and Docker enthusiast, Gamer

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