Building a Simple Dashboard with Flask and HTML: Integration Guide for Mac and Windows

Introduction:

In this tutorial, we will explore how to integrate Flask, a lightweight web framework, with HTML to create a basic dashboard. We’ll use iframes to embed content within the dashboard, allowing us to display multiple web pages or components in a single view. By the end, you’ll have a good understanding of how to leverage Flask and HTML to build dynamic dashboards for your web applications.

Prerequisites: Before we dive into the tutorial, make sure you have the following installed:

Project Structure :

project/
├── app.py
├── templates/  
    ├── dashboard.html
    ├── content1.html
    └── content2.html

Python (version 3.x)
Flask (install using pip install Flask)

pip install flask

Python

Step 1:

Setting up the Flask Application Let’s start by creating a new directory for our project. Open your terminal or command prompt and execute the following commands:

For Mac :

$ mkdir flask-dashboard
$ cd flask-dashboard

Bash

For Windows :

$ mkdir flask-dashboard
$ cd flask-dashboard

Bash

Next, create a new Python file called app.py and open it in your preferred code editor. Import Flask and create a Flask application object as follows:

from flask import Flask

app = Flask(__name__)

Python

Step 2:

Defining Routes and Rendering HTML In Flask, routes are used to define different URLs within your application. Let’s create a route for the dashboard and a basic HTML template for rendering the dashboard.(include the below code on app.py)

from flask import render_template

@app.route('/')
def dashboard():
    return render_template('dashboard.html')

Python

Step 3:

Creating the HTML Template Create a new directory called templates inside the project directory. Within the templates directory, create a new HTML file called dashboard.html and open it in your code editor.

<!DOCTYPE html>
<html>
<head>
    <title>Flask Dashboard</title>
</head>
<body>
    <h1>Welcome to the Flask Dashboard!</h1>
    <iframe src="{{ url_for('content1') }}"></iframe>
    <iframe src="{{ url_for('content2') }}"></iframe>
       <!--dont forget to remove the curly braces and replace your iframe url :
    Such as :
    <iframe src="https://dashingknights.com/"></iframe>  // Enter your prefered dashboard url
    -->
</body>
</html>

HTML

Step 4:

Adding Content Pages Let’s create two additional routes in app.py to render content within the iframes in the dashboard.

@app.route('/content1')
def content1():
    return render_template('content1.html')

@app.route('/content2')
def content2():
    return render_template('content2.html')

Python

Step 5:

Creating Content HTML Templates Create two new HTML files inside the templates directory: content1.html and content2.html. Feel free to add any content you want to these files. For demonstration purposes, we’ll keep them simple:

content1.html

<!DOCTYPE html>
<html>
<head>
    <title>Content 1</title>
</head>
<body>
    <h2>Content Page 1</h2>
    <p>This is the first content page.</p>
</body>
</html>

HTML

content2.html

<!DOCTYPE html>
<html>
<head>
    <title>Content 2</title>
</head>
<body>
    <h2>Content Page 2</h2>
    <p>This is the second content page.</p>
</body>
</html>

HTML

Step 6:

Running the Application Save all your changes and return to the terminal or command prompt. Make sure you are in the flask-dashboard directory and execute the following command to start the Flask development server:

For Mac and Windows Similar Commands :

$ python app.py

Bash

(or)

flask run

Bash

You should see output similar to:

Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Open your web browser and visit http://127.0.0.1:5000/ or http://localhost:5000/. You should see the Flask dashboard with iframes displaying the content pages.

Congratulations! You have successfully integrated Flask with HTML to create a simple dashboard. By leveraging Flask’s routing capabilities and HTML’s iframe element, you can build dynamic dashboards that display multiple components or web pages in a single view. This approach provides flexibility and allows you to incorporate various content into your dashboard. Experiment with adding more routes, content pages, or customizations to further enhance your dashboard based on your project requirements.

Remember to explore Flask’s extensive documentation and HTML’s capabilities to unlock additional features and create more sophisticated dashboards. Happy coding!

Note: This tutorial focused on the integration of Flask with HTML to build a basic dashboard. For a production-ready application, you may need to consider security measures, data persistence, and other advanced functionalities.

Depak