Python Flask with simple HTML files to server web pages along with API

CK 3788
Created at Aug 05, 2024 08:49:15
Updated at Aug 05, 2024 08:54:56

933 0 0

Flask allows you to render HTML templates using the Jinja2 templating engine.

Step 1: Create HTML Templates

First, create a directory named templates in the same directory as your app.py file. Inside the templates directory, create an HTML file (e.g., index.html).

Directory Structure:

/my_flask_app
    /static
        /css
            style.css
        /js
            script.js
        /images
            logo.png
    /templates
        index.html
    app.py

Note that, by default, Flask looks for static files in a directory named static in the same directory as your app.py file.

Step 2: Create Static Files

static/css/style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

static/js/script.js

document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript loaded');
});

Step 3: Create an HTML File

templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Flask App</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <p>This is a simple HTML page served by Flask.</p>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

Step 4: Modify the Flask Application

Update your app.py to serve the HTML file.

app.py

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

# Define a route for the home page
@app.route('/')
def home():
    return render_template('index.html')

# Define a route for a simple GET request
@app.route('/api/hello', methods=['GET'])
def hello_world():
    return jsonify(message="Hello, World!")

# Define a route for a simple POST request
@app.route('/api/data', methods=['POST'])
def get_data():
    data = request.get_json()
    return jsonify(received_data=data)

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

Explanation

Import render_template:
python
코드 복사
from flask import Flask, request, jsonify, render_template
Create a route to render the HTML template:
python
코드 복사
@app.route('/') def home(): return render_template('index.html')

Running the Server

Run the server as before:

python app.py

Accessing the HTML Page

Navigate to http://127.0.0.1:5000/ in your web browser. You should see the HTML page with the styles applied from style.css and the JavaScript loaded from script.js.

Explanation

Static Files Directory: Flask automatically serves files from the static directory at the /static URL path.
Referencing Static Files: Use the url_for function in your templates to reference static files. This function helps Flask generate the correct URL for the static file, ensuring that it works correctly even if your application structure changes.

By following this approach, you can easily manage and serve static files without needing to map them with routes manually.

Combining HTML and API

You now have a simple Flask web server that can serve HTML pages and handle API requests. You can extend this setup to include more HTML files and more complex interactions between your frontend (HTML, CSS, JavaScript) and backend (Flask API).

Comments 0