NoteBook

Appearance

Flask Quasar Setup ​

Quasar ​

Install ​

sh
npm init quasar@latest

Quasar.config.ts ​

  • Change dist dir to build directly in your flask project
  • Change the name of the static folder to match the flask convention
ts
...
      distDir: "../your_flask_app/dist",
      extendViteConf (viteConf) {
        return {
          build: {
            assetsDir: "static",
          }
        }
      },
...

Flask ​

Update app routes ​

py

# Use pythondecouple to set const
STATIC_DIR = "static"
OUT_QUASAR = "dist"

app = Flask(
    __name__,
    static_folder=f"{OUT_QUASAR}/{STATIC_DIR}",
    template_folder=OUT_QUASAR,
    static_url_path=f"/{STATIC_DIR}",
)

Add index route ​

py
from flask import send_from_directory

@app.route("/", defaults={"path": ""})
@app.route("/<path>")
def index(path):
    return render_template("index.html")

Add favicon / icons routes ​

py
import os
from flask import send_from_directory

@app.route("/icons/<icon>")
def icons(icon):
    return send_from_directory(
        os.path.join(app.root_path, app.template_folder, "icons"),
        icon,
        mimetype="image/vnd.microsoft.icon",
    )


@app.route("/favicon.ico")
def favicon():
    return send_from_directory(
        os.path.join(app.root_path, app.template_folder),
        "favicon.ico",
        mimetype="image/vnd.microsoft.icon",
    )