Dockerizing Front End as Angular and Back End as Flask

5 min readAug 1, 2023

Docker is an excellent tool for containerizing applications, providing portability and ease of deployment. In this blog post, we will guide you through the process of dockerizing a front end using Angular and a back end using Flask.

Installing Docker on Windows and Linux

For Windows:

Visit the Docker website: docs.docker.com and download the 64-bit installer for Windows.
Run the installer and follow the installation instructions.

For Linux:

Go to the Docker website: docs.docker.com and select the documentation for your Linux distribution.
Follow the instructions provided to install Docker on your system.

Once the installation is complete, open a terminal and run the following command to ensure Docker is installed correctly:
docker run hello-world

Before we dive into Dockerizing the applications, let’s quickly review some basic Docker commands:

docker run: This command creates a new container from a Docker image.
docker build: This command builds an image from a Dockerfile.
docker images: This command lists all available images on your system.
docker ps: This command lists all running containers on your system.
docker stop: This command stops a running container.
docker start: This command starts a stopped container.
docker remove: This command removes a container.

Dockerizing Flask and Angular

To complete the Dockerization process and enable running the Flask and Angular applications on HTTPS port using Nginx, we need to add build and run commands for both Flask and Angular, along with the Nginx configuration.

Assuming you have the following project structure:

project/
 ├── backend/
 │ ├── Dockerfile
 │ ├── app.py
 │ └── requirements.txt
 ├── frontend/
 │ ├── Dockerfile
 │ ├── package.json
 │ ├── server.js
 │ └── (other Angular files)
 └── nginx/
 └── nginx.conf

Dockerfile Configuration for Flask

To create a Docker image for a Flask application, you can use the following Dockerfile:

Dockerfile for Flask App (backend/)

Explanation:

The FROM instruction specifies the base image, which includes Python 3.8 installed in a slim environment.
The WORKDIR instruction sets the working directory to /app within the container.
The COPY instruction copies the requirements.txt file to the container's working directory.
The RUN instruction installs the Python dependencies specified in requirements.txt.
The second COPY instruction copies the app.py file to the container's working directory.
Finally, the CMD instruction tells Docker to execute the app.py file when the container starts.

Build and Run Commands for Flask:

# Build Flask Docker Image
docker build -t my_flask_app backend/

# Run Flask Docker Container
docker run -d - name flask_app -p 5000:5000 my_flask_app

Nginx Configuration :

To create certificates and keys for HTTPS, you can use OpenSSL, a widely used and open-source cryptographic toolkit. Below are the commands to generate a self-signed certificate and key:

Generate a private key:

openssl genpkey -algorithm RSA -out server.key

This will generate a new private key and save it in the file server.key.

Create a certificate signing request (CSR):

openssl req -new -key server.key -out server.csr

You will be prompted to enter some information about your organization and the server. You can leave the “Challenge Password” field empty.

Generate a self-signed certificate:

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

This will create a self-signed certificate and save it in the file server.crt. The certificate is valid for 365 days (-days 365), but you can adjust this value as needed.

After running these commands, you will have the following files:

server.key: The private key.
server.csr: The certificate signing request.
server.crt: The self-signed certificate.

Please note that self-signed certificates are suitable for testing and development purposes but not recommended for production environments. In production, you should obtain SSL certificates from a trusted Certificate Authority (CA) to ensure security and avoid browser warnings for your users.

nginx.conf

nginx conf file for to enable HTTPS

Dockerfile Configuration for Angular

To create a Docker image for an Angular application, you can use the following Dockerfile:

Dockerfile for Angular App (frontend/)

Explanation:

The first FROM instruction specifies the base image for the build stage, which is Node.js 16 with Alpine Linux. This base image contains a minimal Linux distribution, making it lightweight and suitable for development and production use.
WORKDIR sets the working directory inside the container to /app, which is where the Angular application will be built.
COPY package.json ./ copies the package.json file from the local project directory into the container's working directory.
RUN npm install installs the Node.js dependencies listed in the package.json file inside the container.
The next COPY instruction copies the entire Angular application source code (including all files and folders) into the container's working directory.
RUN npm run build executes the build script defined in the package.json file, which creates a production build of the Angular application inside the container.
The second FROM instruction specifies the base image for the final stage, which is Nginx with Alpine Linux. This base image provides a lightweight and high-performance web server for serving static content.
COPY --from=builder /app/dist /usr/share/nginx/html copies the contents of the dist folder (the production build of the Angular application) from the previous build stage (the Node.js-based builder) into the default web server directory of Nginx (/usr/share/nginx/html). This is where Nginx serves the static files of the Angular application.
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf copies the custom Nginx configuration (located in the nginx directory of the local project) into the container. This configuration file is used to set up the server block for handling requests and enabling HTTPS (if configured).
EXPOSE 80 and EXPOSE 443 are used to specify that the container will listen on ports 80 and 443, allowing these ports to be accessible from the host machine.
CMD ["nginx", "-g", "daemon off;"] is the command that starts Nginx in the container. The -g "daemon off;" option ensures that Nginx runs in the foreground so that the Docker container doesn't exit immediately.

Build and Run Commands for Angular:

# Build Angular Docker Image
docker build -t my_angular_app frontend/

# Run Angular Docker Container with HTTPS port mapped to 443
docker run -d - name angular_app -p 80:80 -p 443:443 my_angular_app

Reverse Proxy: Managing incoming traffic and routing requests to multiple backend services.

Serving Angular: Efficiently serving static files of Angular applications.
HTTPS Support: Handling SSL termination and enabling secure HTTPS communication.
Load Balancing: Distributing incoming requests across multiple service instances.
Customizable Routing: Defining custom routes and rules for handling specific URLs or requests.
Improved Performance: Efficiently handling large numbers of concurrent connections with minimal resource usage.

With these configurations, the Angular application will be served by Nginx on both HTTP and HTTPS ports (80 and 443, respectively). The Flask application will be running on port 5000 inside its Docker container.

Please ensure that you have valid SSL certificates (certificate.crt and certificate.key) if you want to use HTTPS. Also, don't forget to replace /path/to/ssl/ with the actual path to the SSL certificates on your system.

With the provided Dockerfile configurations, you can now containerize your Angular front end and Flask back end applications effortlessly. This will enable you to deploy your applications consistently and efficiently across different environments, ensuring seamless delivery to end-users.
🥳 Happy Dockerizing!