A Flask extension that integrates with Vite
Project description
Canonical Webteam Flask-Vite integration
A Flask extension that integrates with Vite, enabling use of Vite's dev server and static builds with as little configuration as possible.
Features
- easy to configure
- simple API
- supports custom Vite configurations
- supports multiple JS entry points
- supports all Vite-compatible JS frameworks
- supports all Vite-compatible stylesheet languages
- hot reloading in development mode
modulepreloadhints for JS chunks in production mode
How to use the extension
Install
To install this extension as a requirement in your project, you can use PIP:
pip install canonicalwebteam.flask-vite
Configure
The extension parses the following values from the Flask app.config object:
VITE_MODE: "development" | "production"- type of environment in which the Vite integration will runVITE_PORT: int- port where Vite's dev server is runningVITE_OUTDIR: str- file system path where the Vite output is expected; the path can be absolute or relative to the Flask app's root directory
Import
The extension adds a new template global function named vite_import. To include a script or stylesheet, simply invoke this template function passing the path to the file you want to import, relative to the app's root directory.
Example
To import a script whose path is < flask app directory >/js/app/main.ts:
{ vite_import("js/app/main.ts") }
Note: all files imported via
vite_importmust be declared as entry points in your Vite config; if this isn't the case, the Vite build command will not process the file you're trying to import, so the extension will NOT work in production mode.
Minimal usage example
# app.py
app = Flask()
app.config["VITE_MODE"] = "development" if app.debug else "production"
app.config["VITE_PORT"] = 9999
app.config["VITE_OUTDIR"] = "static/dist"
vite = FlaskVite()
vite.init_app(app)
# ...
<!-- templates/base.html -->
<head>
{ vite_import("path/to/source/styles.scss") }
</head>
<body>
<!-- ... -->
{ vite_import("path/to/source/file.tsx") }
</body>
Development
The package leverages poetry for dependency management.
To set up the virtual env and install dependencies, run:
poetry install
Testing
Unit tests can be run using:
poetry run python3 -m unittest discover tests
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file canonicalwebteam_flask_vite-0.2.0.tar.gz.
File metadata
- Download URL: canonicalwebteam_flask_vite-0.2.0.tar.gz
- Upload date:
- Size: 7.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.9.24
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
ab017e326065374a7a3676da405997c7d872b50a3d3c325f02b62f09eda3f499
|
|
| MD5 |
e800959065500a6afbbcec2a707625ad
|
|
| BLAKE2b-256 |
45e1a44481cf791b5723cca3757aa6d39f3bd012755aaaed94dbbc00038c3ac3
|
File details
Details for the file canonicalwebteam_flask_vite-0.2.0-py3-none-any.whl.
File metadata
- Download URL: canonicalwebteam_flask_vite-0.2.0-py3-none-any.whl
- Upload date:
- Size: 11.2 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.9.24
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
55406013a60a0bdd34793d780a903c0a86ed85ae1d410d80ac32dd2f6d227ad1
|
|
| MD5 |
b5fd4feb15f5fc06f0e485b57f8122c2
|
|
| BLAKE2b-256 |
9c9212bdc421e224dea33a7d0987c940f110589b115fff3ac87e3f08a5a56185
|
