Containerising FrontEnd Application

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 the server will be in between the 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 instructions and commands which will be needed for our application will be added to 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 development.yml

Create a Docker File and name it as my app.development.docker file

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 as MyApplication: the latest

docker exec MyApplication_env npm run build

The above command is 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 build.yml

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

Note: Next Article, we will discuss the Design Micro frontend with Docker