Dockerizing Angular Application and Python Backend (Bottle/Flask Framework)

Today, we will do it all.

In this blog, we will learn about Docker, install it and see its implementation.

What is Docker

Docker is a Container Orchestration tool that is designed to make the development, deployment and execution of applications easier. Docker containers basically are an alternative to Virtual Machines and it runs on the Host Operating System. Containers, however, do not need any pre-allocated RAM.

Basic Docker Architecture

How Docker Works

The basic working of Docker can be understood by this simplified diagram,

Basic Workflow of Docker

Here, the developer writes the dependencies and the requirements in a Docker file. The Docker file upon execution produces the Docker Image, which encloses all the requirements mentioned. Docker Containers are created from this Docker Image, to put it in simple words, Docker Containers are the runtime instances of Docker Images. The Docker Image is put to Docker Hub, which is a public repository for Docker Images. You can find a lot of pre-created Docker Images here. You can pull images of your choice and create your own containers.

Why Use Docker

1. We use Docker so that our Development, Deployment and Testing environment could be the same
2. The Microservice Architecture means that if one service goes down others are still up
3. We do not have to allocate RAM or storage to Docker Containers beforehand
4. The dependency at each Microservice Level is reduced

Installing Docker on Windows 10

Step 1: Go to this link and download Docker Desktop

Step 2: You will probably see that WSL 2 is not installed on your system (Docker Desktop will prompt), follow the steps here to install WSL 2 .

(Note: I followed the manual steps given under this link and it worked perfectly fine for me)

Step 3: Run this command in your terminal to verify once WSL-2 is installed

> wsl -l -v

Output from the command

You are now ready to run Docker Desktop. Let us get our hands dirty.

Dockerizing Angular Application (Only UI)

Step 1: Go to the UI Application folder (it would look something like this)

GUI Folder

Step 2: Open cmd and run the following command in the same location path,

> ng build --prod

this will build your Application for Production and a folder named dist will get created within the aforementioned location.

Step 3: Let us create a Dockerfile in the same location path, remember to call it Dockerfile, and write the following commands in it

FROM nginx:1.17.1-alpine
COPY /dist/macroPlan /usr/share/nginx/html

Here we are pulling an image named nginx:1.17.1-alpine from Docker Hub and then copying contents of the dist/macroPlan on the local system to the location /usr/share/nginx/html in the container. This is how we create a simple Dockerfile.

Step 4: For building a Docker Image using this Dockerfile, run the following command,

> docker build -t macroplan .

where, macroPlan was the name of the Docker Image, and the (.) signifies the current directory. You can check if your image is built by running the following command and you would see your Docker Image

> docker images

Step 5: For running this Docker Image and creating a container, run the command,

> docker run -p 80:80 macroplan

Here 80:80 are the Source and Destination Ports. You can go to your browser and type localhost:80 (if this doesn’t come up, copy the IP of your default Docker Application) and see your application come to life.

Congratulations you have put your UI Application on a Docker Container.

Dockerizing Angular Application with Bottle Backend Framework

• SETTING UP THE UI APPLICATION

Go through Step 1, Step 2 and Step 3 of the Previous Section to Set up the UI Application. Do not run the Step 4 and Step 5 yet.

• SETTING UP THE BACKEND APPLICATION

Step 1: Go to the folder location where your Python file (API) is located

Step 2: Create a requirements.txt file for all the dependencies you want to install, just create a text file with the name of the libraries you want to install, mine looks like,

pandas
bottle
datetime
json

Step 3: Create the Dockerfile for the Backend API as,

FROM python:3.7-slim
COPY /locationOfCodeInYourLocal
WORKDIR /DestinationLocationOnContainer
ENV PYTHONUNBUFFERED 1
RUN pip3 install -r /code/requirements.txt
CMD ["python","app.py"]

Here we pull the image named python:3.7-slim and perform the installation on top of it by running PIP commands. We also set up our code on the Container using COPY command and also set up the Working Directory using WORKDIR command. CMD is used to run command-line instructions. Here app.py is the name of the Python API File that we need to run.

• WRITING DOCKER-COMPOSE FILE

Docker Compose is a tool for running multi-container applications on Docker, defined using the Compose file format. A Compose file is used to define how the one or more containers that make up your application are configured. Name your Compose file as docker-compose and add the following details,

version: "3.3"
services:
    app-backend:
        build: ./server/
        image: app_backend
        container_name: backend
        restart: always
        ports:
            - 8082:8082
app-frontend:
        build: ./GUI/
        image: macroplan
        container_name: frontend
        restart: always
        ports:
            - 4200:4200
        expose:
            - "4200"

Here, we define the Source and Destination Ports, the location of the respective Dockerfile (under build option), the name of the image and the container. We also specify the exposed port number.

We then open cmd and run the command,

> docker-compose up --build

The Application is up and Running

The application is now running. Head to the localhost in your browser to look at it. Alternatively, you can check the same from your Docker Desktop, it looks something like this,

Docker Desktop Window

Click on the Open in Browser setting and see your application running.

Congratulations on making it here. Now you know your way around basic Docker, do learn Docker commands before venturing further.

If you found this helpful, leave a clap.