Transport Vite apps to Flask (or Quart).
Project description
flask-vite-transporter 🚚
Transport Vite apps to Flask (or Quart)
pip install flask-vite-transporter
How it works
The pyproject.toml file
The pyproject.toml file is used to store what Vite apps are available.
pyproject.toml:
[tool.flask_vite_transporter]
npm_exec = "npm"
npx_exec = "npx"
serve_app = "app_flask"
vite_app.frontend = "frontend"
The compiling of the Vite apps requires the npx and npm be
available. You can use absolute paths here.
npm_exec is used to run npm install if your Vite app does not
have the node_modules folder.
npx is used to run the Vite app build command.
serve_app is the Flask or Quart app package that will serve the Vite
compiled files. For now this extension only works with the app package setup:
app_flask/
├── static
├── templates
└── __init__.py
vite_app.<reference> is vite_app.'reference in the flask app' = 'relative
folder of the vite app'
You can send over multiple Vite apps to the serving app, and they will be accessible within template files using the reference value.
See Working with vite-transporter using Flask / Quart for more information about how to use references.
[tool.flask_vite_transporter]
npm_exec = "npm"
npx_exec = "npx"
serve_app = "app_flask"
vite_app.customer_portal = "frontends/customer"
vite_app.admin_portal = "frontends/admin"
List the Vite apps
You can see what apps can be compiled by running:
vt list
It will show: <reference>: <vite app source> => <serve app location>
Compiling the Vite apps
vt pack
This will create a
dist folder in each Vite app directory with the compiled files.
Transporting the Vite apps
vt transport
This will move the compiled files to the serving app.
You can also run the pack and transport commands together:
vt pack transport
What happens
The Vite apps are compiled into a dist folder, the files contained
in this folder are then moved to a folder called vite in the serving app.
Any js file that is compiled that contains an asset reference will
replace assets/ with /--vite--/{reference}.
This requires that all assets in the Vite app stay in the
assets folder, and are imported in the
frontend project in a way that the Vite compile stage can find them.
Modes (--mode)
The Vite apps can be compiled in different modes by using the -m or --mode
flag:
vt pack -m development
# or
vt pack -m your-named-mode
An example of pack and transport together:
vt pack -m dev transport
# or
vt pack transport -mode dev
These mode values are accessible via import.meta.env.MODE in the Vite app.
See Vite: Env Variables and Modes to find out more about Vite modes.
Only (--only)
If you have multiple frontends and only want to pack and transport one you
can use the -o or --only flag to do that.
Here's an example:
[tool.flask_vite_transporter]
npm_exec = "npm"
npx_exec = "npx"
serve_app = "app_flask"
vite_app.customer_portal = "frontends/customer"
vite_app.admin_portal = "frontends/admin"
vt pack transport --only admin_portal
Working with vite-transporter using Flask / Quart
flask-vite-transporter creates a couple of Flask / Quart context processors that match the Vite apps to a Flask / Quart template.
The context processors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{{ vt_head('frontend') }}
<title>Test</title>
</head>
<body>
{{ vt_body() }}
</body>
</html>
vt_head(
reference: str # The name of the reference used.
)
vt_body(
root_id: str = "root", # The id of the root element
noscript_message: str = "You need to enable JavaScript to run this app.",
)
Flask Example
from flask import Flask, render_template
from flask_vite_transporter import ViteTransporter
def create_app():
app = Flask(__name__)
ViteTransporter(app)
@app.route("/")
def index():
return render_template("index.html")
return app
Quart Example
from quart import Quart, render_template
from flask_vite_transporter.quart import QuartViteTransporter
def create_app():
app = Quart(__name__)
QuartViteTransporter(app)
@app.route("/")
async def index():
return await render_template("index.html")
return app
CORS
Setting:
ViteTransporter(app, cors_allowed_hosts=["http://127.0.0.1:5003"])
This is to allow the Vite app to communicate with the app.
Note: It's recommended to remove this in production.
Running the demos
We will be using a package call
pyqwe to run commands from the pyproject file.
Installing the development requirements will install pyqwe:
pip install -r requirements/tests.txt
Use pyqwe to install the local version of flask-vite-transporter:
pyqwe install
The serve_app under tool.flask_vite_transporter is currently set to use
the Flask demo app.
pyqwe flask_plus_vite
You should be able to visit the Flask app and the Vite app from the link in the terminal. Change something in the Vite app, save, then in a separate terminal run:
vt pack transport
The Vite app will be compiled, and the files will be moved to the Flask app. Visiting the Flask app from the link in the terminal should show the changes.
Things to note
When including credentials in fetch requests in the vite app. You must visit the serve app first to set the credentials.
For example, if the serve app is running on http://127.0.0.1:5001,
you must visit this address first.
This won't be needed in production, as it's expected that the Vite app will be served from the same domain.
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 flask_vite_transporter-2.0.4.tar.gz.
File metadata
- Download URL: flask_vite_transporter-2.0.4.tar.gz
- Upload date:
- Size: 106.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.9.21
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
62d0d98fdd1b070c4f928cbe791216ef6de0d80fe5da8c32ce18c6d0aab19814
|
|
| MD5 |
9cf86623e1349d46c9906cfb06f85e18
|
|
| BLAKE2b-256 |
e288d3b5537699364f7e74c3407181dff59a5a81e34b9e9c891e1caa9e27e20e
|
File details
Details for the file flask_vite_transporter-2.0.4-py3-none-any.whl.
File metadata
- Download URL: flask_vite_transporter-2.0.4-py3-none-any.whl
- Upload date:
- Size: 16.0 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.9.21
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
3dbe6df98d288ae9fbe2aae5dcea245d158f0d99d7bf8e23b34c70deb80259f5
|
|
| MD5 |
a15579d88c984216cdffb72c95cacb9a
|
|
| BLAKE2b-256 |
4022ce39f2ffae2b6e11533042ce2295ca4b731e195d8092c3b245dd989b150a
|
