Skip to main content

Flask extension for serving Vite-managed assets in development and production

Project description

Flask-Vite-Assets

A Flask extension that seamlessly integrates Vite asset management into your Flask/Jinja2 templates, supporting both the Vite dev server (with HMR) and production manifest-based asset fingerprinting.

Features

  • 🔥 Hot Module Replacement (HMR) in development via the Vite dev server
  • 📦 Manifest-based asset fingerprinting in production
  • 🎨 Automatic CSS injection from the Vite manifest
  • 🔌 Flask extension pattern with init_app support
  • 🧩 Zero-config defaults with full configurability
  • 🐍 Typed — ships with py.typed

Installation

pip install flask-vite-assets

If you use the Vite dev server in development, also install requests:

pip install "flask-vite-assets[dev-server]"

Quick start

Application factory pattern

from flask import Flask
from flask_vite_assets import ViteAssets

vite = ViteAssets()

def create_app():
    app = Flask(__name__)
    vite.init_app(app)
    return app

Direct initialisation

from flask import Flask
from flask_vite_assets import ViteAssets

app = Flask(__name__)
ViteAssets(app)

Jinja2 templates

<!DOCTYPE html>
<html>
<head>
    <!-- Injects <link> + <script> tags from the Vite manifest in production,
         or a <script> tag pointing at the Vite dev server in development -->
    {{ vite_asset("js/main.js") }}
</head>
<body>
    ...
    <!-- Injects the Vite HMR client in development only (no-op in production) -->
    {{ vite_hmr_client() }}
</body>
</html>

How it works

Development mode (DEBUG=True)

  1. The extension attempts to connect to the Vite dev server (default http://localhost:5173).
  2. If the server is reachable it returns a <script type="module"> tag pointing at the dev server, enabling HMR.
  3. If the primary port is unavailable it automatically tries the next port (5174), which Vite uses when the preferred port is already occupied.
  4. If neither server is reachable it falls back to the production manifest.

Production mode (DEBUG=False)

  1. Reads <app.static_folder>/.vite/manifest.json.
  2. For each entry emits <link rel="stylesheet"> tags for associated CSS files, then a <script type="module"> tag for the JS bundle.
  3. Falls back to serving the asset path directly if the manifest is missing or malformed.

Configuration

All configuration is optional.

Flask config key Environment variable Default Description
VITE_DEV_SERVER VITE_DEV_SERVER http://localhost:5173 Base URL of the Vite dev server
VITE_MANIFEST_PATH <app.static_folder>/.vite/manifest.json Absolute path to the production Vite manifest

Flask config takes precedence over environment variables.

Vite configuration

Point Vite's output at your Flask static folder and enable manifest generation:

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  root: "resources",
  base: "/static/",
  build: {
    outDir: "../resources/static",
    manifest: true,
    rollupOptions: {
      input: "assets/js/main.js",
    },
  },
});

Using the helpers directly

You can also call the helpers directly in Python code instead of going through the extension:

from flask_vite_assets import vite_asset, vite_hmr_client

License

MIT

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

flask_vite_assets-0.1.0.tar.gz (8.1 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

flask_vite_assets-0.1.0-py3-none-any.whl (7.2 kB view details)

Uploaded Python 3

File details

Details for the file flask_vite_assets-0.1.0.tar.gz.

File metadata

  • Download URL: flask_vite_assets-0.1.0.tar.gz
  • Upload date:
  • Size: 8.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for flask_vite_assets-0.1.0.tar.gz
Algorithm Hash digest
SHA256 3e0485dc402386b6d3fbf5daaec6f309219662eaeb0d5106c3bdb87a8bb46b7d
MD5 9472ad8be2f3123eb084a9effcde3691
BLAKE2b-256 76f1f1a3d01a5176ccd649379fb85558e5f1fd52eb740a962c228cbb56171785

See more details on using hashes here.

Provenance

The following attestation bundles were made for flask_vite_assets-0.1.0.tar.gz:

Publisher: release.yml on mrailton/flask-vite-assets

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file flask_vite_assets-0.1.0-py3-none-any.whl.

File metadata

File hashes

Hashes for flask_vite_assets-0.1.0-py3-none-any.whl
Algorithm Hash digest
SHA256 60e7b81f618bb3c5176e4dcd916f1c3978fded8616a91099bbd33d9314397aed
MD5 a11b89fb9102228e4ab39f2d9e10a2b3
BLAKE2b-256 1b7070373ab061daacc1c853e756dbc115e61d70dc26fff0c22eb3263d9f77d0

See more details on using hashes here.

Provenance

The following attestation bundles were made for flask_vite_assets-0.1.0-py3-none-any.whl:

Publisher: release.yml on mrailton/flask-vite-assets

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page