Dockerizing Angular/Web3 app

Web development these days is often more about combining various npm packages then actuall programming. And the packages incompactibility can be extremely frustrating at times. When you add crypto to this mix, it becomes even wilder. Truffle framework promises to ease some problems with deployment of smart contracts, but it introduces other hard-to-debug problems. Recently I started developing small dApp on Angular and I’ve run into yet another issues.

1st issue – can not install web3 on Windows

This is old one, and there is no 100% reliable solution. You will be recommended to install windows-build-tools, but the installation process itself can hang/crash and then you are stuck.

// unfortunatelly this can still fail
npm install --global --production windows-build-tools
node-gyp configure --msvs_version=2015
npm config set python /path/to/executable/python2.7
npm install web3 --save

2st issue – package crypto built in nodejs is not available

The package has been integrated into nodejs from version 11. So if you are using node v10, you will run into trouble as some npm packages depend on it. In order to avoid the hassle with nvm and rebuilding globally installed packages, you can dockerize it.

How to dockerize Angular app?

Add this Dockerfile to the root folder of your project

FROM node:11.1.0

RUN echo node version
RUN node --version

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# increment this line when you update the package.json
# otherwise Docker will you cached version of this layer
RUN touch break-cache-15

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install -g @angular/cli
RUN npm install

# add app
COPY . /usr/src/app

# enable crypto package in nodejs
COPY patch.js /usr/src/app/patch.js
RUN node patch.js

# Expose the port the app runs in
EXPOSE 4200

# start app
# the poll option should overcome problem with not working module hot-reload
CMD ng serve --host 0.0.0.0 --poll 1000

And the .dockerignore file to speed things up

node_modules
npm-debug.log
.git

Build the image

docker build -t your-image-name .

And run it

docker run -d --name container-name -v c:\src\path-to-project:/usr/src/app:rw -v /usr/src/app/node_modules -p 4200:4200 your-image-name

Optimize workflow

As you develop, and add/remove npm packages, you will want to re-create docker images and run new versions of container. Repeating the same commands over and over is tedious, so I recommend create aliases or shortcuts. On Windows you can create them with the doskey command. Described fully in this article.