Navigation

Search

Docker runner for angular2

By Alberto Galiana /
on recipe, angular2, webpack, docker, bash

Overview

Docker environments are a great, easy and portable way to work and develop. If you agree with me keep on reading :)

This article is based in my angular2 webpack starter: https://github.com/alber999/angular2-webpack-starter

Instead raw docker, I prefer to automate common tasks by creating a docker runner script. This is the way I work to setup custom docker containers. Use this as an inspiration to create your own dockerizations.

Important: You need a bash shell to run docker runner. Tested on linux and macos.

Change your mind, change your workflow

Instead of installing, configuring and deploying your application and its dependencies in your machine, make your life easier...

Pros

  • You don't have to install anything in your machine but docker and git to get sources repository
  • Save time. Clone sources repository and deploy development environment just using very short commands
  • Within this environment you can deploy, debug, run, test and manage git repository
  • This environment is created, used and maintained by the application developer... it works for sure :)

Cons

  • Now you have time to think about coding, can't be that bad! :)

Features

  • Common docker tasks at ease
  • Docker version verification
  • Custom bashrc and gitconfig files from remote repository
  • Github keys added to let you operate with git within docker machine
  • Host application domain check
  • Application auto-start and logs
  • Docker ssh session auto-start

Install docker

Follow instructions for your environment: https://docs.docker.com/

Previous configuration

Create host in your machine

You must add new entry in /etc/hosts

127.0.0.1 docker.savethecode.angular2

Create personal environment repository

If you want to customize your docker environment, you can do it creating a personal environment repository on GitHub.

Sample: https://github.com/alber999/environment

As you can see in sample repository above, this repository must contain following files that will be integrated in docker environment:

  • .bashrc
  • .gitconfig

The other files are ignored by docker container, it's up to you what else to have in your environment repository. Then, you just have to edit docker.sh and update variable REPOSITORY_ENVIRONMENT. Sample:

REPOSITORY_ENVIRONMENT=git@github.com:alber999/environment.git

Run docker runner

I like to have sources in host machine to edit with my favorite editor. Then, share your local source code as a volume in docker.

Clone angular2 webpack starter repository:

git clone git@github.com:alber999/angular2-webpack-starter.git

Just run docker runner with no arguments to see available options:

cd angular2-webpack-starter  
./docker.sh

Start docker container

cd angular2-webpack-starter  
./docker.sh start

Application is compiled and launched whenever container is started. To see what is happening you can run following commands in docker container:

  • log: alias for tail -f /var/log/savethecode/angular2.log
  • logc: colored log: alias for grc tail -f /var/log/savethecode/angular2.log

These alias are added by docker.sh to .bashrc in container when starting.

Open in browser http://docker.savethecode.angular2:8080

Open container session

If you exit container session, you can open it again:

cd angular2-webpack-starter  
./docker.sh bash

Relaunch angular2 application

In docker container... 

ps aux  
kill -9 <angular2-webpack-starter_webpack-dev-server__PIDs>

cd /src/savethecode/  
npm start

Or exit docker container and run ./docker.sh start again

Run angular2 tests

Run following commands within docker container. Jasmine tests running on Karma

cd angular2-webpack-starter  
npm test

Run tests with coverage (karma coverage and istanbul instrumenter)

cd angular2-webpack-starter  
npm run test:coverage

Coverage reports are written in coverage directory

Build angular2 sources for production

Built sources will be included in a host application

cd angular2-webpack-starter  
npm run build

dist directory contains compressed sources ready for production

Sources

https://github.com/alber999/angular2-webpack-starter

Dockerfile

https://github.com/alber999/angular2-webpack-starter/blob/master/Dockerfile

FROM node:boron  
MAINTAINER Alberto Galiana <alberto.galiana@savethecode.com>

ENV DEBIAN_FRONTEND noninteractive  
ENV PHANTOMJS_BIN "/usr/local/bin/phantomjs"

RUN apt-get -y update --fix-missing  
RUN apt-get -y install vim nano curl net-tools htop bash-completion grc git  
RUN npm i -g phantomjs-prebuilt gulp  
RUN apt-get clean

COPY /tmp/github_rsa /root/.ssh/  
COPY /tmp/github_rsa.pub /root/.ssh/  
COPY /tmp/.gitconfig /root/  
COPY /tmp/.bashrc /root/  
COPY /docker_entrypoint.sh /

RUN chmod +x /docker_entrypoint.sh  
ENTRYPOINT ["/docker_entrypoint.sh"]

WORKDIR /src/savethecode

VOLUME ["/src/savethecode"]  
EXPOSE 8080

One common problem when host and guest run different platforms are the phantom binaries, specific for each platform. You can see in Dockerfile above how phantomjs is installed globally to avoid errors (lines 5 and 9)

Entrypoint

https://github.com/alber999/angular2-webpack-starter/blob/master/docker_entrypoint.sh

#!/bin/bash

##################################################
# CONFIGURATION
##################################################
LOG_DEST_PATH=/var/log/savethecode  
LOG_DEST_FILE=$LOG_DEST_PATH/angular2.log

##################################################
# DEPLOY APPLICATION
##################################################
mkdir -p $LOG_DEST_PATH

echo "Starting SaveTheCode angular2 webpack starter... be patient :)" >> $LOG_DEST_FILE  
npm i >> $LOG_DEST_FILE  
npm start >> $LOG_DEST_FILE

# keep running
tail -f /dev/null

Docker runner

https://github.com/alber999/angular2-webpack-starter/blob/master/docker.sh