Connecting Frontend, Backend, and Database in Docker

Modern web applications require efficient and seamless integration between the frontend, backend, and database. This blog explores the process of connecting these components using Flask, Bash scripts, and Docker, focusing on their roles and interactions.

Prerequisites

Before proceeding, it is essential to have:

1. Docker and Docker Compose for containerization.
2. Python 3.x and pip for backend development.
3. A basic understanding of HTML, Flask, and SQL for frontend and database operations.

Conceptual Overview

Frontend

The frontend represents the user interface of the application. It is where users interact with the application, input data, and view results. In this setup, an HTML file is utilized to provide a simple form for user interaction.

Backend

The backend serves as the application’s engine, processing requests, executing business logic, and interacting with the database. Flask, a lightweight web framework, facilitates these tasks effectively.

Database

The database is the storage layer for the application. It keeps user data organized and accessible. While SQLite is often chosen for its simplicity, in this example, we integrate MySQL to handle more complex requirements.

Containerization with Docker

Docker ensures the environment for each component is consistent and isolated. Docker Compose simplifies orchestrating the frontend, backend, and database into a cohesive system.

Key Configuration Details

Backend Setup with MySQL

The Flask application provides endpoints for user interaction and data submission. Configuration settings, such as database connections, are managed using app.config in Flask:

Flask Configuration for MySQL:

from flask import Flask
from flaskext.mysql import MySQL

app = Flask(__name__)

# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'Himanshu'
app.config['MYSQL_DATABASE_PASSWORD'] = 'Myapp'
app.config['MYSQL_DATABASE_HOST'] = '172.17.0.21'
app.config['MYSQL_DATABASE_DB'] = 'Abcd'

mysql = MySQL()
mysql.init_app(app)

@app.route("/data")
def fetch_data():
    conn = mysql.connect()
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM students")
    data = cursor.fetchall()
    return {"students": data}        

This configuration connects the application to a MySQL database hosted in a Docker container.

Docker Compose

Docker Compose is used to define and run multi-container Docker applications. Each service—frontend, backend, and database—is configured in the docker-compose.yml file to specify dependencies, ports, and volumes.

Automation with Bash

A Bash script simplifies repetitive tasks like initializing the database and starting Docker services. Here is an example:

Sample Bash Script for Automation:

#!/bin/bash

export FLASK_APP=backend/app.py
export FLASK_ENV=development

echo "Starting the application with Docker..."
docker-compose up --build        

This script sets up the environment and starts the Docker containers.

Steps to Execution

1. Database Preparation: Ensure the MySQL database is correctly initialized and running in a Docker container.
2. Frontend and Backend Connection: The frontend interacts with the backend via HTTP requests, typically using endpoints defined in the Flask application.
3. Containerization: Docker ensures each component runs in a consistent environment, eliminating dependency issues.
4. Automation: The Bash script orchestrates all steps, from initializing the application to starting the Docker environment.

Benefits of This Approach

• Scalability: Docker enables easy scaling of individual components as needed.
• Consistency: Containers provide uniform environments across different systems.
• Automation: Scripts reduce manual effort and ensure consistent results.

Conclusion

This theoretical overview highlights the interconnected roles of frontend, backend, and database in a modern web application. By utilizing Flask for backend development, Bash for automation, and Docker for containerization, you can create a robust, scalable, and maintainable system.