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
Update your Vite configuration
Set build.manifest to true in your Vite config.
Configure
The extension reads the following values from the Flask app.config object:
VITE_MODE: "development" | "production"- type of environment in which the Vite integration will run. Defaults to"production".VITE_PORT: int- port where Vite's dev server is running. Defaults to5173.VITE_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. Defaults to"static/dist".VITE_REACT: bool- only needed for React projects; set toTrueto inject React HMR dev tools in dev mode. Defaults toFalse.
Note: the extension does NOT manage the state of the Vite dev server nor produce the static builds, you are responsible for running the appropriate Vite commands before initializing the extension.
Initialize
from canonicalwebteam.flask_vite import FlaskVite
vite = FlaskVite()
vite.init_app(app)
Import resources
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: when importing a file via
vite_import, make sure it's also declared as an entry point in your Vite config (underbuild.rollupOptions.input); if this isn't the case, the import will break in production mode. This is because Vite's build won't contain the file you're trying to import, sovite_importwill throw aManifestContentExceptionwhen attempting to resolve the filesystem path.
Minimal usage example
# app.py
# ...
app.config["VITE_MODE"] = "development" if app.debug else "production"
FlaskVite(app)
#...
<!-- templates/index.html -->
<head>
{ vite_import("path/to/source/styles.scss") }
</head>
<body>
{ vite_import("path/to/source/file.tsx") }
</body>
For a more fleshed-out example check the example directory.
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.3.1.tar.gz.
File metadata
- Download URL: canonicalwebteam_flask_vite-0.3.1.tar.gz
- Upload date:
- Size: 8.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.9.24
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
4178b89f239e871f9e907c6d1dbb30c22ea2e200e83cf60ec697fd0a627236d4
|
|
| MD5 |
49d9e0734ecbd73c27dea96437e6bea5
|
|
| BLAKE2b-256 |
0a48fb1fe037b2ad3da5af8b198f35da7c53c640a8b9ad7b47438a7cbcbf3822
|
File details
Details for the file canonicalwebteam_flask_vite-0.3.1-py3-none-any.whl.
File metadata
- Download URL: canonicalwebteam_flask_vite-0.3.1-py3-none-any.whl
- Upload date:
- Size: 11.7 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 |
f3f86521f7b5f92e4da90b1536da672a8b640e033d137e3d94afa77bf7d35744
|
|
| MD5 |
fae0b66eaf469447bcf0f0136b5d7ba3
|
|
| BLAKE2b-256 |
ff7859c7406f0b7e118c52558d4964b66a43d36f0fde739dd24bb6e63f144c43
|
