Angular Development with Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels.

Sounds very technical? OK in other words docker is a virtualization tool, which helps you –

  • Keeping all dependencies / Libraries versions consistent across systems and team spaces.
  • Keeps your system clean from multiple conflicting configuration and runtime setup for different projects.
  • Simplifies the development workflow across the team.
  • Promotes micro-service architecture.
  • Makes it more secure

Now that we know how docker can really help us streamline the development workflow and iron out the setup and configuration discrepancies, let’s see how to implement it into practice.

whether you are going to use docker-compose or not you would need a Dockerfile in your project so lets discuss about it. This is how a typical Dockerfile looks like ( at-least for our case ) –

FROM node:10.16.0-alpine
WORKDIR /usr/src/app
COPY package.json ./
RUN npm i -g @angular/[email protected] && npm i
COPY . .
EXPOSE 4200
CMD npm start

Lets understand what each line means and is used for –

FROM node:10.16.0-alpine

This simply means we are going to use base node image of version 10.16.0 you may wish a version higher or lower based on your requirement, as far as alpine is concerned it is a smaller version of NodeJs image ( well almost 300 MB smaller to be precise in case of 10.16.0 ).

WORKDIR /usr/src/app

This line means we are setting out application directory or working directory to /usr/scr/app you can set it to whatever you want, if this directory doesn’t exist already docker will create one for you, this directory is important for future reference since this is going to be your application directory and everything else will be referenced from here.

COPY package.json ./

In here we are copying our package.json to our work directory root i.e /usr/scr/app/ remember this from our previous point

RUN npm i -g @angular/[email protected] && npm i
  • Simple enough we are installing the required dependencies here in below order
    • @angular/cli global installation, you can specify the version required else it would just pick the latest stable version to install.
    • npm I everything else required to run the project, present in package.json.
COPY . .

Once the dependencies are installed copy the remaining code as it is from the repository to the work directory.

EXPOSE 4200

Exposing port on which we are going to run the application.

CMD npm start

To start the start script from package.json