1. Integrating Frontend HTML with Flask¶

Visual Studio Code has Emmet functionality built-in:

Emmet allows you to quickly generate template code using abbreviations.

Example:

Type `html:5` and press the `<Tab>` key to generate an HTML5 boilerplate template.

1.1. Folder Structure and Creating `login.html`¶

The folder structure should be as follows:

directory/
    python_file.py
    templates/
        login.html

1.2. Loading Static HTML Pages with Flask¶

Flask allows serving frontend HTML pages using the render_template() function.

The render_template() function sends HTML files as a response.
HTML files must be located inside the templates folder in the Flask project.

In [4]:

#### Flask Application: Combining Login Functionality and Static Pages
from flask import Flask, jsonify, request, render_template

app = Flask(__name__)

# Handle login result and authentication
@app.route('/login/result')
def login_result():
    username = request.args.get('user_name')
    pw = request.args.get('pw')
    email = request.args.get('email_addr')
    if username == 'Kim':
        if pw == 'password':
            ret_data = {'auth': 'success', 'email':email}
        else:
            ret_data = {'auth': 'failed'}
    else:
        ret_data = {'auth': 'failed'}
    return jsonify(ret_data)

# Render the login page
@app.route('/login')
def login():
    # Serve the login.html file from the templates folder
    return render_template('login.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='5555')

 * Serving Flask app '__main__'
 * Debug mode: off

WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5555
 * Running on http://172.22.109.123:5555
Press CTRL+C to quit
127.0.0.1 - - [02/Jan/2025 00:23:21] "GET /login/result?user_name=Kim&pw=password&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:23:50] "GET /login/result?user_name=Kim&pw=password1&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:24:00] "GET /login/result?user_name=Kim&pw=password1&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:24:16] "GET /login/result?user_name=Kim&pw=password&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:51:10] "GET /login/result?user_name=Kim&pw=password1&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:53:40] "GET /login/result?user_name=Kim&pw=password&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 00:53:56] "GET /login/result?user_name=Kim&pw=password&email_addr=kim.woongkeol@gmail.com HTTP/1.1" 200 -

2. Bootstrap¶

Step-by-Step Guide to Integrate the Bootstrap `sign-in` Template with a Python Flask Project¶

2.1. Downloading the Bootstrap Example¶

Visit the following link to access the official Bootstrap example templates:
Bootstrap Examples (https://getbootstrap.com/docs/5.3/examples/)
Explore the sign-in template example.

2.2. Extracting the Files¶

Unzip the downloaded Bootstrap example files.
Inside the unzipped folder, locate the sign-in folder.
Open the folder and find the index.html file. This will be used as the base template for your project.

2.3. Integrating the Bootstrap Template into a Flask Project¶

Set Up the Flask Project Directory
Ensure your Flask project directory is structured as follows:

static/
   brand/
   dist/
      css/
      js/
   js/
   sign-in.css
templates/
   login_bootstrap.html
app.py

Move Bootstrap Files
- Move the following files from the sign-infolder to your Flask project:
  - CSS (bootstrap.min.css) → flask/source/static/dist/css/
  - JS files → flask/source/static/js/
  - SVG files (e.g., logo.svg) → flask/source/static/brand/
- Rename the index.html file as login_bootstrap.html and move it to the templates/ folder in your Flask project.

If you're curious whether your setup is correct, please check the code and directory structure on my GitHub (https://github.com/Kim-William/Personal_Python_Projects/tree/main/flask).

2.4. Adjusting Resource Paths in `login_bootstrap.html`¶

Why Adjust Resource Paths?
- The original resource paths in the Bootstrap template (e.g., ../assets/dist/css/bootstrap.min.css) do not align with the Flask project's directory structure.
- Flask serves static files from the /static/ directory by default.

How to Adjust Paths?

Update the <link> and <script> tags in login_bootstrap.html to reflect the correct Flask static file paths.

Example:

<!-- Update the CSS path -->
<link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Update the JS path -->
<script src="/static/js/bootstrap.bundle.min.js"></script>

<!-- Update the SVG logo path -->
<img src="/static/brand/logo.svg" alt="Brand Logo">

The href and src attributes must use paths relative to the Flask static directory.

2.5. Final Verification¶

Run your Flask application.
Navigate to the route that renders login_bootstrap.html in your browser.
Ensure that the Bootstrap styling and JavaScript functionality are working as expected. The static files (CSS, JS, SVG) should load correctly without any errors in the browser console.

Example → Example

In [9]:

from flask import Flask, jsonify, request, render_template

# Set a custom static file path for Bootstrap resources
app = Flask(__name__, static_url_path='/static')

@app.route('/')
def index():
    return '<h1>Welcome to Homepage</h1>'

@app.route('/login/result')
def login_result():
    # Retrieve query parameters for password and email
    pw = request.args.get('pw')
    email = request.args.get('email_addr')
    # Validate user credentials
    if pw == 'password':
        if email == 'kim@gmail.com':
            ret_data = {'auth': 'success'}
        else:
            ret_data = {'auth': 'failed'}
    else:
        ret_data = {'auth': 'failed'}
    return jsonify(ret_data)

@app.route('/login')
def login():
    # Render the HTML page integrated with Bootstrap
    return render_template('login_bootstrap.html')

if __name__ == '__main__':
    # Run the Flask application
    app.run(host='0.0.0.0', port='5555')

 * Serving Flask app '__main__'
 * Debug mode: off

WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5555
 * Running on http://172.22.109.123:5555
Press CTRL+C to quit
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /login HTTP/1.1" 200 -
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /static/js/color-modes.js HTTP/1.1" 304 -
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /static/sign-in.css HTTP/1.1" 304 -
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /static/dist/css/bootstrap.min.css HTTP/1.1" 304 -
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /static/dist/js/bootstrap.bundle.min.js HTTP/1.1" 304 -
127.0.0.1 - - [02/Jan/2025 01:43:14] "GET /static/brand/bootstrap-logo.svg HTTP/1.1" 304 -

Flask Bootstrap