Conquering the Container: A Guide to Dockerizing Your Angular and Flask App

Ever dreamt of deploying your sleek Angular frontend and powerful Python Flask backend as a cohesive unit? Docker is here to make that dream a reality! Dockerizing your application offers numerous benefits, including:

• Simplified Deployment: Package your entire application into a single, portable unit for easy deployment across various environments.
• Isolation: Run your application independent of the host system's configuration, ensuring consistent behavior.
• Scalability: Easily scale your application by spinning up new containers on demand.

This guide will equip you with the knowledge to dockerize your Angular frontend and Flask backend, paving the way for seamless deployments.

Prerequisites:

• Basic understanding of Angular and Flask development
• Docker installed on your machine (https://www.docker.com/products/docker-desktop/)

Part 1: Building the Docker Image for Your Flask Backend

• Create a Dockerfile: In the root directory of your Flask project, create a file named Dockerfile. This file defines the instructions for building your Docker image.

• Specify Base Image: Start by defining the base image. We recommend using a lightweight Python image like python:3.9-slim:
  

FROM python:3.9-slim

• Install Dependencies: Use the COPY instruction to copy your project directory into the container and then RUN pip install -r requirements.txt to install your Python dependencies:

WORKDIR /app
COPY . .
RUN pip install -r requirements.txt

• Copy Your Flask App: Copy your Flask application files into the container:

COPY your_app.py /app/your_app.py

• Define the Entrypoint: Specify the command to run when the container starts. In this case, we'll execute your Flask app:

CMD ["python", "/app/your_app.py"]

Part 2: Building the Docker Image for Your Angular Frontend

• Navigate to Your Angular Project: Navigate to the root directory of your Angular project.

• Build the Production-Ready Angular App: Use the ng build --prod command to build your Angular application in production mode. This creates an optimized build for deployment.
  

ng build --prod

• Create a Dockerfile: Similar to your Flask project, create a Dockerfile in the root directory of your Angular project.

• Specify Base Image: Use a lightweight Node.js image like node:18-alpine as the base:
  

FROM node:18-alpine

• Set Working Directory: Define the working directory within the container:

WORKDIR /app

• Copy Angular App: Copy the production build of your Angular application from the dist folder:

COPY dist/ .

• Expose Port (Optional): If your Angular application runs on a specific port (e.g., 4200), expose it using the EXPOSE instruction:

EXPOSE 4200

• Serve the Application: Instruct the container to serve the static Angular application using a web server like nginx:

CMD ["nginx", "-g", "daemon off;"]

Part 3: Running Your Dockerized Application

• Build the Images: Use the docker build command to build Docker images for both your Flask backend and Angular frontend projects.

For Flask:

   docker build -t my-flask-app .

For Angular:

   docker build -t my-angular-app .

Replace my-flask-app and my-angular-app with your desired image names.

• Run the Containers: Run the built images using docker run.

For Flask:

   docker run -d --name my-flask-container my-flask-app

For Angular:

   docker run -d --name my-angular-container -p 4200:4200 (optional for port mapping) my-angular-app

The -d flag runs the container in detached mode, and --name assigns a name to the container for easier management.

• Access Your Application:

  • Access your Flask backend based on the port it runs on (typically 5000 by default).
  • If you exposed the Angular frontend port (e.g., port 4200 in the example), you can access your application at http://localhost:4200 in your web browser. This will launch your Angular frontend, which will in turn communicate with the Flask backend running in the container network.

Part 4: Linking Your Dockerized Services

While you now have separate Docker images for your Flask backend and Angular frontend, they operate in isolation. To create a cohesive application, we need them to communicate with each other. Here's how to achieve that:

Option 1: Environment Variables

• Expose Backend URL in Dockerfile (Flask): Modify your Flask project's Dockerfile to expose the backend's URL as an environment variable. This allows your Angular frontend to access the backend's address within the container network.

   ENV BACKEND_URL="http://my-flask-container:5000"  # Replace with actual port if different

• Inject Environment Variable into Angular App: Use the Angular CLI to inject the BACKEND_URL environment variable into your Angular application:

   ng build --configuration=production --prod --baseHref=$BACKEND_URL

This injects the environment variable into the build process, making it accessible within your Angular code.

• Access Backend in Angular: In your Angular application's code, use dependency injection to access the injected BACKEND_URL and make HTTP requests to your backend API endpoints using that URL.

Option 2: Docker Compose

• Create a docker-compose.yml File:
  
  Create a file named docker-compose.yml in the root directory of your project (ideally where both backend and frontend reside). This file defines the services (your Docker images) and how they interact.

• Define Services:
  Specify your Flask and Angular Docker images as services within the docker-compose.yml file:
  

   version: "3.8"

   services:
     my-flask-app:
       build: .  # Build from the current directory (assuming Dockerfile is present)
       ports:
         - "5000:5000"  # Map container port 5000 to host port 5000

     my-angular-app:
       build: ./frontend  # Assuming your Angular project is in a subfolder named "frontend"
       ports:
         - "4200:4200"  # Optional: Map container port 4200 to host port 4200
       depends_on:
         - my-flask-app  # Ensure Angular starts after Flask is up

• Run Docker Compose: Use the docker-compose up -d command to build and run both services defined in the docker-compose.yml file. The -d flag runs them in detached mode.

Choosing the Right Option:

• Environment Variables: Simpler for smaller projects, but requires code modification during deployment.
• Docker Compose: More scalable and offers better service management, ideal for complex applications.

Conclusion:

By following these steps, you've successfully dockerized your Angular frontend and Flask backend, allowing you to deploy them as a single unit. This approach streamlines deployment, promotes consistency, and paves the way for easier scaling in the future. Remember to adapt the provided commands and configurations to your specific project structure and environment. Happy Dockerizing!

---

Dockerizing Front End as Angular and Back End as Flask | by RamkumarMrj | Medium

RamkumarMrj ・ Aug 1, 2023 ・

Medium