Skip to main content

Transport Vite apps.

Project description

🚚 vite-transporter

Transport Vite apps.

pip install vite-transporter

Currently compatible with:

  • Flask
  • Quart

Note (Flask/Quart): 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.

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 serving app listed in the serve_app key.

pyproject.toml:

[tool.vite_transporter]
npm_exec = "npm"
npx_exec = "npx"
serve_app = "app_flask_demo"
vite_apps = ["app_vite_demo"]

The compiling of the Vite apps requires the npx and npm to 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 app that will serve the Vite compiled files.

vite_app_dirs is a list of directories that contain Vite apps.

You can send over many Vite apps to the serving app, they will be accessible within template files.

List the Vite apps

You can see what apps can be compiled by running:

vt list

Compiling the Vite apps

vt compile

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--/{app_name}.

This requires that all assets in the Vite app stay in the assets folder.

Working with vite-transporter using Flask / Quart

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('app_vite_demo') }}
    <title>Test</title>
</head>
<body>
{{ vt_body() }}
</body>
</html>
vt_head(
    vite_app_name: str  # The name of the Vite app to load
)
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 vite_transporter.flask 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 vite_transporter.quart import ViteTransporter


def create_app():
    app = Quart(__name__)
    ViteTransporter(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 vite-transporter:

pyqwe install

The serve_app under tool.vite_transporter is currently set to use the Flask demo app.

We will run this in terminal 1:

pyqwe flask

You should be able to visit the Flask app from the link in the terminal, and see the current Vite app.

Next, we will run the Vite app in terminal 2:

pyqwe vite

Visit the vite app from the link in the terminal. Change something, save, then in terminal 3 run:

vt compile

The Vite app will be compiled, and the files will be moved to the Flask app. Visiting the Flask app from the link in terminal 1 should show the changes.

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

vite_transporter-0.8.0.tar.gz (12.4 kB view details)

Uploaded Source

Built Distribution

vite_transporter-0.8.0-py3-none-any.whl (14.8 kB view details)

Uploaded Python 3

File details

Details for the file vite_transporter-0.8.0.tar.gz.

File metadata

  • Download URL: vite_transporter-0.8.0.tar.gz
  • Upload date:
  • Size: 12.4 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: python-requests/2.32.3

File hashes

Hashes for vite_transporter-0.8.0.tar.gz
Algorithm Hash digest
SHA256 2db07dc5beed0c49bbdbc060bae956e11e341cc7798de10794b4f5693aa5a8f3
MD5 4899e95e24fac20906858dc3f6f62812
BLAKE2b-256 fce2e2c27d07d6bfad3d7f7d9716199cc2abd2b616afc4b5c9c5626bc1394dde

See more details on using hashes here.

File details

Details for the file vite_transporter-0.8.0-py3-none-any.whl.

File metadata

File hashes

Hashes for vite_transporter-0.8.0-py3-none-any.whl
Algorithm Hash digest
SHA256 7c77bdfeca30886b8624485add7c304cc0070d6cb1cd40b38009a5ebfbc21b54
MD5 857da98c40150bbb9b2a560a91e679f7
BLAKE2b-256 ee882ed7e28248be0c30bf245ff42e21d23dbefa6832d4d242281c4590151799

See more details on using hashes here.

Supported by

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