Refactor flask-assets.

Author: toddbirchard

.env.example

@@ -2,7 +2,7 @@ ENVIRONMENT=production
 FLASK_DEBUG=True
 SECRET_KEY=YourSecretKey
 
-REDIS_URI=redis://:password@host.com:1234
+REDIS_URI="redis://:password@host.com:1234"
 
 SQLALCHEMY_DATABASE_URI=mysql+pymysql://myuser:mypassword@host.example.com:1234/mydatabase
 SQLALCHEMY_CA_CERTS="./creds/certificate.crt"

config.py

@@ -1,6 +1,7 @@
 """App configuration."""
-from os import environ, path
+
 import subprocess
+from os import environ, path
 
 import redis
 from dotenv import load_dotenv

flask_session_tutorial/__init__.py

@@ -1,33 +1,39 @@
 """Initialize app."""
+
 from flask import Flask
+from flask_assets import Environment
 from flask_login import LoginManager
 from flask_session import Session
 from flask_sqlalchemy import SQLAlchemy
 
 db = SQLAlchemy()
 login_manager = LoginManager()
 session = Session()
+assets = Environment()
 
 
 def create_app():
     """Construct the core flask_session_tutorial."""
     app = Flask(__name__, instance_relative_config=False)
     app.config.from_object("config.Config")
+    assets = Environment()
 
     # Initialize Plugins
     db.init_app(app)
     login_manager.init_app(app)
     session.init_app(app)
+    assets.init_app(app)
 
     with app.app_context():
         from . import auth, routes
-        from .assets import compile_static_assets
+        from .assets import compile_javascript, compile_stylesheets
 
         app.register_blueprint(routes.main_blueprint)
         app.register_blueprint(auth.auth_blueprint)
 
         # Create static asset bundles
-        compile_static_assets(app)
+        compile_stylesheets(assets)
+        compile_javascript(assets)
 
         # Create Database Models
         db.create_all()

flask_session_tutorial/assets.py

@@ -1,50 +1,41 @@
 """Compile static asset bundles."""
-from flask import Flask
-from flask_assets import Bundle, Environment
-
-
-def compile_static_assets(app: Flask):
-    """
-    Compile all asset bundles.
 
-    :param Flask app: Top-level Flask application.
-    """
-    compile_stylesheets(app)
-    compile_javascript(app)
+from flask import current_app as app
+from flask_assets import Bundle, Environment
 
 
-def compile_stylesheets(app: Flask):
+def compile_stylesheets(assets: Environment) -> Environment:
     """
     Generate CSS from .LESS source.
 
     :param Flask app: Top-level Flask application.
     """
-    assets = Environment(app)
     Environment.auto_build = True
     Environment.debug = False
     # Stylesheets Bundle
-    stylesheet_bundle_account = Bundle(
+    account_stylesheet_bundle = Bundle(
         "src/less/account.less",
         filters="less,cssmin",
         output="dist/css/account.css",
         extra={"rel": "stylesheet/less"},
     )
-    stylesheet_bundle_dashboard = Bundle(
+    dashboard_stylesheet_bundle = Bundle(
         "src/less/dashboard.less",
         filters="less,cssmin",
         output="dist/css/dashboard.css",
         extra={"rel": "stylesheet/less"},
     )
     # Register assets
-    assets.register("styles_account", stylesheet_bundle_account)
-    assets.register("styles_dashboard", stylesheet_bundle_dashboard)
+    assets.register("styles_account", account_stylesheet_bundle)
+    assets.register("styles_dashboard", dashboard_stylesheet_bundle)
     # Build assets in development mode
     if app.config.get("ENVIRONMENT") != "production":
-        stylesheet_bundle_account.build(force=True)
-        stylesheet_bundle_dashboard.build(force=True)
+        account_stylesheet_bundle.build(force=True)
+        dashboard_stylesheet_bundle.build(force=True)
+    return assets
 
 
-def compile_javascript(app: Flask):
+def compile_javascript(assets: Environment) -> Environment:
     """
     Bundle and minimize Javascript source files.
 
@@ -60,3 +51,4 @@ def compile_javascript(app: Flask):
     # Build assets in development mode
     if app.config.get("ENVIRONMENT") != "production":
         js_bundle.build(force=True)
+    return assets

flask_session_tutorial/auth.py

@@ -1,4 +1,5 @@
 """Routes for user authentication."""
+
 from typing import Optional
 
 from flask import Blueprint, Response, flash, redirect, render_template, request, url_for

flask_session_tutorial/forms.py

@@ -1,4 +1,5 @@
 """Sign-up & log-in forms."""
+
 from flask_wtf import FlaskForm
 from wtforms import PasswordField, StringField, SubmitField
 from wtforms.validators import DataRequired, Email, EqualTo, Length, Optional

flask_session_tutorial/models.py

@@ -1,4 +1,5 @@
 """Database models."""
+
 from flask_login import UserMixin
 from werkzeug.security import check_password_hash, generate_password_hash
 

flask_session_tutorial/routes.py

@@ -1,4 +1,5 @@
 """Routes for logged-in flask_session_tutorial."""
+
 from flask import Blueprint, Response, redirect, render_template, session, url_for
 from flask_login import current_user, login_required, logout_user
 

flask_session_tutorial/static/src/less/dashboard.less

@@ -29,6 +29,11 @@ html {
     margin: auto;
     height: fit-content;
 
+    @media(max-width: @mobile-breakpoint) {
+      width: 100%;
+      margin: 0;
+    }
+
     h1 {
       font-family: 'agenda', sans-serif;
       font-weight: 600;

flask_session_tutorial/static/src/less/vars.less

@@ -23,3 +23,7 @@
 
 // Animation
 @transition: all .3s ease-out;
+
+// Breakpoints
+@tablet-breakpoint: 800px;
+@mobile-breakpoint: 600px;