Flask Tutorials: Blueprint Static Files

Welcome to our comprehensive guide on using Blueprint Static Files in Flask! 🎯

In this lesson, we'll walk you through how to organize and serve static files like CSS, JavaScript, and images using Flask Blueprints. By the end of this tutorial, you'll be able to build more sophisticated applications with a better structure.

What are Static Files?

Static files are the non-changing resources, such as HTML, CSS, JavaScript, images, and fonts, that are necessary for your web application to function correctly but do not change based on user interactions.

Why Use Blueprint for Static Files?

Using Blueprints to manage static files makes it easier to keep your project organized and maintainable. Each Blueprint can have its own set of templates, static files, and routes, making it perfect for creating reusable and modular components.

Getting Started

Before diving into Blueprint static files, let's first make sure you have Flask installed. If you haven't done so already, install Flask using pip:

bash

pip install flask

Now, let's create a new Flask project and set up a Blueprint for serving static files.

python

from flask import Flask, Blueprint

app = Flask(__name__)

static_files_blueprint = Blueprint('static_files', __name__, static_folder='static')

@static_files_blueprint.route('/css/style.css')
def serve_style_css():
    return send_from_directory('static', 'style.css')

@static_files_blueprint.route('/js/script.js')
def serve_script_js():
    return send_from_directory('static', 'script.js')

app.register_blueprint(static_files_blueprint)

In the above code, we've created a new Blueprint called static_files and registered it with our Flask application. We've also defined two routes, one for serving a CSS file and another for a JavaScript file, both located within the static folder.

Practical Example

Let's see this Blueprint in action by creating an HTML template and adding some static files. Create a new folder named templates and a folder named static within the project directory.

Adding Static Files to the Static Folder

Create the following files in the static folder:

style.css
script.js

css

/* style.css */
body {
    background-color: #f0f8ff;
    font-family: Arial, sans-serif;
}

javascript

// script.js
console.log('Hello, World!');

Creating an HTML Template

Create an index.html file within the templates folder:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static Files Example</title>
    <link rel="stylesheet" href="{{ url_for('static_files.serve_style_css') }}">
    <script src="{{ url_for('static_files.serve_script_js') }}"></script>
</head>
<body>
    <h1>Welcome to our Flask Blueprint Static Files Example!</h1>
</body>
</html>

Serving the HTML Template

Now, let's update the app.py file to serve our HTML template:

python

from flask import render_template

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

Testing Our Application

Run your application using the following command:

bash

python app.py

Navigate to http://127.0.0.1:5000/ in your web browser, and you should see our static files in action.

Pro Tip:

Remember to use the url_for function to generate URLs for our static files within the templates. It ensures that the correct path is used even if we decide to change the Blueprint name or the folder location of our static files.

Quiz

Congratulations! You've now learned how to use Blueprint for serving static files in Flask. As you continue to work with Flask, you'll find that Blueprints are an essential tool for building modular and maintainable web applications. Happy coding! 🚀