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.2.tar.gz (11.9 kB view details)

Uploaded Source

Built Distribution

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

Uploaded Python 3

File details

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

File metadata

  • Download URL: vite_transporter-0.8.2.tar.gz
  • Upload date:
  • Size: 11.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.9.19

File hashes

Hashes for vite_transporter-0.8.2.tar.gz
Algorithm Hash digest
SHA256 d2a7520a271887b0229c1b220f8b76174b322831b1d5540c3ae5219dd4a7f055
MD5 59f3c958bb4c94249cbba8f67ba09b36
BLAKE2b-256 7f59b5f99052f2ed8455686c0db512ba425db2a5e8d7b0a8b6e2bb1c2c1b6b74

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for vite_transporter-0.8.2-py3-none-any.whl
Algorithm Hash digest
SHA256 4965b0e853b72fcbb191785b7bb8dd966900b9c069822103f522ec1ad81a024f
MD5 b0ab3fa642a442c83b5a29374ef6730b
BLAKE2b-256 d8dbbcffd790bbb57923abf3716cb99f74e8e5f260ec63fbfc1bbd2bfbe97aab

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