Transport Vite apps to Flask / Flask blueprints.
Project description
🎒 Project has moved to vite-transporter
Note:: This project will be archived and no longer maintained.
🚛 vite-to-flask
Transport Vite apps to Flask.
pip install vite-to-flask
How it works
The pyproject.toml file
The pyproject.toml file is used to store what Vite apps are available.
Adding the following to the pyproject.toml file will transfer all the Vite
apps listed in the vite_app_dirs list to the Flask app listed in the flask_app_dir key.
pyproject.toml:
[tool.vtf]
npx_exec = "npx"
flask_app_dir = "app_flask_demo"
vite_app_dirs = ["app_vite_demo"]
The compiling of the Vite apps requires the npx command to be
available. You can use absolute paths to npx here.
List the Vite apps
You can see what apps can be compiled by running:
vtf list
Compiling the Vite apps
vtf compile
The Vite apps are compiled into a dist folder, the files contained
in this folder is then moved to a folder called vtf in the Flask app.
Any js file that is compiled that contains an asset reference will
replace assets/ with /__vtf/{app_name}.
Working with vite-to-flask
vite-to-flask creates a couple of Flask context processors that match the Vite apps to a Flask template.
It also creates a Flask route that serves the Vite app files.
The context processors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{{ vtf_head('app_vite_demo') }}
<title>Test</title>
</head>
<body>
{{ vtf_body() }}
</body>
</html>
vtf_head(
vite_app_name: str
)
vtf_body(
root_id: str = "root",
noscript_message: str = "You need to enable JavaScript to run this app.",
)
The route
@app.route("/__vtf/<vite_app>/<filename>")
def __vtf(vite_app: str, filename: str):
return send_from_directory(vtf_dir / vite_app, filename)
CORS
vite-to-flask will add the following CORS headers to the Flask app, only in debug mode:
if app.debug and not app.config.get('VTF_DISABLE_DEBUG_CORS', False):
@app.after_request
def add_cors_headers(response):
response.headers["Access-Control-Allow-Origin"] = "*"
response.headers["Access-Control-Allow-Headers"] = "*"
response.headers["Access-Control-Allow-Methods"] = "*"
return response
This is to allow the Vite app to communicate with the Flask app during development.
As you can probably work out, you can disable this behavior by setting a Flask config value
of VTF_DISABLE_DEBUG_CORS to True
Running the example
pip install vite-to-flask
cd app_vite_demo
npm i
cd ..
vtf compile
flask --app app_flask_demo run --debug
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
File details
Details for the file vite_to_flask-0.7.1.tar.gz.
File metadata
- Download URL: vite_to_flask-0.7.1.tar.gz
- Upload date:
- Size: 91.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: python-requests/2.31.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 2cb6d003d19a7b671ca1e0d0347184e2ddae2222790a92c3dc2ff41cf8eacf11 |
|
| MD5 | 282d28f1948ca0adc54ef0a7a2c0f36f |
|
| BLAKE2b-256 | 0a60f7a7efc015c979dea3f7d7bff01db839a4381217dc59e24b7e4d4c68778d |
File details
Details for the file vite_to_flask-0.7.1-py3-none-any.whl.
File metadata
- Download URL: vite_to_flask-0.7.1-py3-none-any.whl
- Upload date:
- Size: 8.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: python-requests/2.31.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 9bf64d2bb1fb4656f011e9b6056c5ef8f8a3ab6b1bf6761cf4f8c410692abb34 |
|
| MD5 | 7db89dd20d6df7d16d06c54c086379b9 |
|
| BLAKE2b-256 | d32d37e32f13368c42eb988dd6260da3a18b6e446f828db0a39d38a9a8e4be60 |
