Containerizing FrontEnd Application

Estimated read time 3 min read


Docker is the open platform to build, ship and run distributed applications,

The Docker will help us to pack our application as a single package and we can create n number of instances. We can deploy the application across the developer system, Develop and production environment.

Docker Terminology

Docker engine: The process running on server  this will be in between Docker application and the Server Operating System

Dockerfile:   File which contains the commands to create a docker image file

Docker image: The image will be created based on the instructions and commands given in the docker file. For example, if we want to make a web application as dockerize,  all the instruction and commands which will be needed for our application will be added in the docker file.

Docker container: A runtime instance of a Docker image. Whereas the Docker image is like a template. the container is an actual running instance of that image.

Docker host: A physical or virtual machine that runs the Docker engine to host your Docker container’s DockerHub.

DockerHub: The repository that hosts Docker images. a central location for hosting and serving up Docker images.

Workflow of the Build Process

Environment for Application Build Process

Create a Docker compose file and name it as development.yml

version: '2'
      context: .
      dockerfile: myapp.development.dockerfile
    container_name: myApp
    image: MyApplication_env
      - .:myApplication/
      -  myApplication/node_modules
      - dev-network
      - '5555:5555'
    driver: bridge

Create a Docker File and name it as myapp.development.dockerfile

# Create an Environment with Base Image of Node Version 10.0.0
FROM node:10.0.0
# Create a Folder for the Application where we need to copy the code
RUN mkdir -p /usr/src/myApplication
# Get all the code needed to run the app
COPY . /usr/src/myApplication
# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/myApplication
# Install the 
RUN npm install
# Serve the app
CMD ["npm"]

Commands to Create a Development Image, This image contains the frontend code and the Node Version 10.0.0

docker-compose -f development.yml build
docker images

The Development docker image was created and named it as MyApplication:latest

docker exec MyApplication_env npm run build

The above command used to compile the code, for example. if it is an Angular Application, the compiled source code will be in the www folder

Copy the Compiled Files from the Container

Remove the MyApplication_env Container and Image

mkdir -p myAppBuild
cd myAppBuild
docker cp MyApplication_env:/usr/src/myApplication .
docker stop MyApplication_env
docker rm MyApplication_env
docker rmi MyApplication_env

Create a Docker compose file and name it as build.yml

version: '2'
      context: .
    command: pwd
    command: npm start
    container_name: myApplication
    image: MyApplication
    driver: bridge

Create a Docker File and name it as build.dockerfile

# Create image based on the official Node 6 image from dockerhub
FROM nginx
COPY myApp/nginx.conf /etc/nginx/nginx.conf
COPY build/myApplication/ /usr/local/htdocs/

Create a Frontend Image with Nginx Server

docker-compose -f docker-compose.testing.yml build
docker run -d —name MyApplication -p 4200:8080 MyApplication:latest