Conquering the Container: A Guide to Dockerizing Your Angular and Flask App
Tags: docker, devops, flask, angular
Published: 2024-05-04 14:16:01

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/](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`:

```dockerfile
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:

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

 - **Copy Your Flask App:** Copy your Flask application files into the container:

```dockerfile
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:

```dockerfile
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.

```bash
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:

```dockerfile
FROM node:18-alpine
```

 - **Set Working Directory:** Define the working directory within the container:

```dockerfile
WORKDIR /app
```

 - **Copy Angular App:** Copy the production build of your Angular application from the `dist` folder:

```dockerfile
COPY dist/ .
```

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

```dockerfile
EXPOSE 4200
```

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

```dockerfile
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:

   ```bash
   docker build -t my-flask-app .
   ```

   For Angular:

   ```bash
   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:

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

   For Angular:

   ```bash
   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.

   ```dockerfile
   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:

   ```bash
   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:

   ```yaml
   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!


---


{% embed https://medium.com/@RamkumarMrj/dockerizing-front-end-as-angular-and-back-end-as-flask-1e944a0ed77 %}