🐳🚀Day 21: Lets Dive in Docker with Real-World Project

Hello everyone!🌟Today, I dived deep into Docker and successfully deployed a two-tier Python Flask application! Certainly! Here’s a simplified guide on how to create a BMI Calculator Flask app and deploy it using Docker.

1. Project Structure

Create the following directory structure for your Flask app:

bmi_calculator/
├── app.py
├── templates/
│   ├── base.html
│   └── index.html
├── static/
│   └── style.css
├── requirements.txt

2. Set Up Your Environment

Create a Project Directory:

  mkdir bmi_calculator
  cd bmi_calculator

Create requirements.txt :

Create a file named requirements.txt with the following content:
```
  pip install -r requirements.txt
```

3. Create the Flask App

Create app.py:

This file contains the main application code.

  from flask import Flask, render_template, request

  app = Flask(__name__)

  @app.route('/', methods=['GET', 'POST'])
  def index():
      bmi = None
      if request.method == 'POST':
          height = float(request.form.get('height'))
          weight = float(request.form.get('weight'))
          bmi = round(weight / ((height / 100) ** 2), 2)
      return render_template('index.html', bmi=bmi)

  if __name__ == '__main__':
      app.run(debug=True)

Create HTML Templates:

base.html (in templates/):

This is the base template that provides the common layout.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BMI Calculator</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </body>
    </html>

index.html (in templates/):

This is the main template where the BMI calculation form is shown and results are displayed.

    {% extends "base.html" %}
    {% block content %}
        <h1>BMI Calculator</h1>
        <form method="POST" action="/">
            <label for="height">Height (cm):</label>
            <input type="number" name="height" id="height" step="0.1" required>
            <br>
            <label for="weight">Weight (kg):</label>
            <input type="number" name="weight" id="weight" step="0.1" required>
            <br>
            <button type="submit">Calculate BMI</button>
        </form>
        {% if bmi is not none %}
            <h2>Your BMI is: {{ bmi }}</h2>
        {% endif %}
    {% endblock %}

Create a CSS File:

style.css (in static/):

This file contains the CSS to style the page.

    body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 50px;
    }

    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
        color: #333;
    }

    label {
        display: block;
        margin-top: 10px;
    }

    input {
        margin-top: 5px;
        padding: 10px;
        width: calc(100% - 22px);
        box-sizing: border-box;
    }

    button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #218838;
    }

4. Run the Flask App

Navigate to the Project Directory:

Ensure you are in the directory where app.py is located:
```
  cd bmi_calculator
```
Run the Flask App:
```
  python app.py
```

Here’s a quick overview of the process:

Create a Docker file for a simple web application (Python app)

Edit the file by following the Docker file architecture.

Ran the Docker build and Docker run command.

Verified the app by visiting the IP address with the port number.

Home Page: Open http://51.20.183.92:5000/ in your browser to see the BMI calculator.
Form Submission: Enter height and weight, click "Calculate BMI," and the result will be displayed on the same page.

Summary

app.py: Contains Flask routes and logic for handling BMI calculations.
base.html: Defines the common layout for your pages.
index.html: The main page where users interact with the BMI calculator.
style.css: Styles the web pages for a better user experience.
Running the App: Start the Flask development server to test your application in a web browser.

By following these steps, you can easily run and manage your own Flask applications using Docker, streamlining the deployment process and ensuring consistency across environments. Stay tuned for more updates as I continue my DevOps journey, and don’t forget to follow me on LinkedIn for insights and tips on Docker and more!🌟

Happy Learning!😊