Dockerizing UI app – Angular application
This blog demonstrates the basic steps to dockerize an UI app built with angular. Except the application specific dependencies, integrations and configurations, the core procedure remains the same for any angular application.
Here we use a simple Angular application and package it as a docker image on our machine. Once image is built, it will run on local as docker container.
Pre-requisites: Below is the list of pre-requisites required:
- Angular CLI installed on local
- Node & npm
- Docker Desktop installation
- Visual Studio or any Other IDE
The sample angular application used is a simple app with a button which maintains the number of times it is clicked within the same tab. The application is running on port 4201
The application structure looks like below:
To package this application as a docker image, we need to create a dockerfile. The contents of our docker file are
- FROM: This instruction specifies the base image on which we intend to run our application. This is usually the first statement in dockerfile. In the above example we are using ‘alpine’ tag of ‘nginx’ image from docker hub as our base image – https://hub.docker.com/_/nginx.
- COPY: We copy the nginx.conf file from our source to the container image so that nginx gets configured as expected. The contents of our nginx file are
In the above configuration we perform basic nginx configurations like listening to http port, configuring root folder and defining a reverse proxy.
- RUN: This instruction is used to create a folder inside the nginx container image
- COPY: This instruction copies the packaged & deployable angular app to the root folder of nginx container
Building the image:
“npm install && npm run ng build && docker build . -t demo/counterappui”
The above command actually performs 2 commands in succession –
- Builds the angular app using ng build in dist fodler
- Creates a docker image and tags it as ‘demo/counterappui’ and saves the image on local repository
To verify whether the image is built properly run ‘docker image list‘ command and check if the image with ‘demo/counterappui’ exists in the list.
Running the image: We run the image with below command
“docker run -p 4202:4201 demo/counterappui”
To verify if docker image is running, run the command ‘docker ps’.
To test the application, access the URL: http://localhost:4202/ in a web browser and check if the application comes up similar to below image
Running in detached mode: ‘docker run -d -p 4202: 4201demo/counterappui ‘. Once the docker runs in detached mode it returns Container_id which can be used to fetch logs & stop the container
Fetching logs of running container: “docker logs ‘CONTAINER_ID’”. Example – docker logs 3d7ff3d032bb97022c5d77a86916a71cdea9fdcbf195d95328ccb881abe2d83d
Stopping a running container: “docker stop ‘CONTAINER_ID’”. Example – docker stop 3d7ff3d032bb97022c5d77a86916a71cdea9fdcbf195d95328ccb881abe2d83d
The commands and instructions mentioned in this artcile are the basic ones to get a developer started with docker. The detailed description and usage of all docker CLI commands can be found at https://docs.docker.com/engine/reference/commandline/docker/
Docker images can be published to a centralized remote repository. Docker hub is a widely used open repository, most cloud providers provide private docker repositories specific to an enterprise cloud account.q