{"id":28445645,"url":"https://github.com/cheesecake87/flask-vite-transporter","last_synced_at":"2025-09-26T14:17:45.553Z","repository":{"id":233972466,"uuid":"788130208","full_name":"CheeseCake87/flask-vite-transporter","owner":"CheeseCake87","description":"I'll need a signature for this.","archived":false,"fork":false,"pushed_at":"2025-08-04T23:08:15.000Z","size":187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-09T10:35:49.834Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CheeseCake87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T20:42:32.000Z","updated_at":"2025-08-04T23:05:32.000Z","dependencies_parsed_at":"2024-08-11T22:26:15.301Z","dependency_job_id":"042f960a-eb70-48e4-9df7-22a9db867b82","html_url":"https://github.com/CheeseCake87/flask-vite-transporter","commit_stats":null,"previous_names":["cheesecake87/vite-transporter","cheesecake87/flask-vite-transporter"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/CheeseCake87/flask-vite-transporter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CheeseCake87%2Fflask-vite-transporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CheeseCake87%2Fflask-vite-transporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CheeseCake87%2Fflask-vite-transporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CheeseCake87%2Fflask-vite-transporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CheeseCake87","download_url":"https://codeload.github.com/CheeseCake87/flask-vite-transporter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CheeseCake87%2Fflask-vite-transporter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277088992,"owners_count":25758816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-26T02:00:09.010Z","response_time":78,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T10:13:31.477Z","updated_at":"2025-09-26T14:17:45.497Z","avatar_url":"https://github.com/CheeseCake87.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flask-vite-transporter 🚚\n\nTransport Vite apps to Flask (or Quart)\n\n```bash\npip install flask-vite-transporter\n```\n\n\u003c!-- TOC --\u003e\n* [flask-vite-transporter 🚚](#flask-vite-transporter-)\n  * [How it works](#how-it-works)\n    * [The pyproject.toml file](#the-pyprojecttoml-file)\n    * [List the Vite apps](#list-the-vite-apps)\n    * [Compiling the Vite apps](#compiling-the-vite-apps)\n    * [Transporting the Vite apps](#transporting-the-vite-apps)\n    * [What happens](#what-happens)\n    * [Modes (--mode)](#modes---mode)\n    * [Only (--only)](#only---only)\n  * [Working with vite-transporter using Flask / Quart](#working-with-vite-transporter-using-flask--quart)\n    * [The context processors](#the-context-processors)\n    * [Flask Example](#flask-example)\n    * [Quart Example](#quart-example)\n    * [CORS](#cors)\n    * [Update the Static URL Path](#update-the-static-url-path)\n  * [Running the demos](#running-the-demos)\n  * [Things to note](#things-to-note)\n\u003c!-- TOC --\u003e\n\n## How it works\n\n### The pyproject.toml file\n\nThe pyproject.toml file is used to store what Vite apps are available.\n\n`pyproject.toml`:\n\n```toml\n[tool.flask_vite_transporter]\nnpm_exec = \"npm\"\nnpx_exec = \"npx\"\nserve_app = \"app_flask\"\nvite_app.frontend = \"frontend\"\n```\n\nThe compiling of the Vite apps requires the `npx` and `npm` be\navailable. You can use absolute paths here.\n\n`npm_exec` is used to run `npm install` if your Vite app does not\nhave the `node_modules` folder.\n\n`npx` is used to run the Vite app build command.\n\n`serve_app` is the Flask or Quart app package that will serve the Vite\ncompiled files. For now this extension only works with the app package setup:\n\n```text\napp_flask/\n├── static\n├── templates\n└── __init__.py\n```\n\n`vite_app.\u003creference\u003e` is vite_app.'reference in the flask app' = 'relative\nfolder of the vite app'\n\nYou can send over multiple Vite apps to the serving app, and they will be\naccessible within template files using the reference value.\n\nSee [Working with vite-transporter using Flask / Quart](#working-with-vite-transporter-using-flask--quart)\nfor more information about how to use references.\n\n```toml\n[tool.flask_vite_transporter]\nnpm_exec = \"npm\"\nnpx_exec = \"npx\"\nserve_app = \"app_flask\"\nvite_app.customer_portal = \"frontends/customer\"\nvite_app.admin_portal = \"frontends/admin\"\n```\n\n### List the Vite apps\n\nYou can see what apps can be compiled by running:\n\n```bash\nvt list\n```\n\nIt will show: `\u003creference\u003e: \u003cvite app source\u003e =\u003e \u003cserve app location\u003e`\n\n### Compiling the Vite apps\n\n```bash\nvt pack\n```\n\nThis will create a\n`dist` folder in each Vite app directory with the compiled files.\n\n### Transporting the Vite apps\n\n```bash\nvt transport\n```\n\nThis will move the compiled files to the serving app.\n\nYou can also run the `pack` and `transport` commands together:\n\n```bash\nvt pack transport\n```\n\n### What happens\n\nThe Vite apps are compiled into a `dist` folder, the files contained\nin this folder are then moved to a folder called `vite` in the serving app.\n\nAny js file that is compiled that contains an asset reference will\nreplace `assets/` with `/--vite--/{reference}`.\n\nThis requires that all assets in the Vite app stay in the\n`assets` folder, and are imported in the\nfrontend project in a way that the Vite compile stage can find them.\n\n### Modes (--mode)\n\nThe Vite apps can be compiled in different modes by using the `-m` or `--mode`\nflag:\n\n```bash\nvt pack -m development\n# or\nvt pack -m your-named-mode\n```\n\nAn example of `pack` and `transport` together:\n\n```bash\nvt pack -m dev transport\n# or\nvt pack transport -mode dev\n```\n\nThese mode values are accessible via `import.meta.env.MODE` in the Vite app.\n\nSee [Vite: Env Variables and Modes](https://vite.dev/guide/env-and-mode) to\nfind out more about Vite modes.\n\n### Only (--only)\n\nIf you have multiple frontends and only want to pack and transport one you\ncan use the `-o` or `--only` flag to do that.\n\nHere's an example:\n\n```toml\n[tool.flask_vite_transporter]\nnpm_exec = \"npm\"\nnpx_exec = \"npx\"\nserve_app = \"app_flask\"\nvite_app.customer_portal = \"frontends/customer\"\nvite_app.admin_portal = \"frontends/admin\"\n```\n\n`vt pack transport --only admin_portal`\n\n## Working with vite-transporter using Flask / Quart\n\nflask-vite-transporter creates a couple of Flask / Quart context processors\nthat match the Vite apps to a Flask / Quart template.\n\n### The context processors\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    {{ vt_head('frontend') }}\n    \u003ctitle\u003eTest\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n{{ vt_body() }}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```\nvt_head(\n    reference: str  # The name of the reference used.\n)\n```\n\n```\nvt_body(\n    root_id: str = \"root\",  # The id of the root element\n    noscript_message: str = \"You need to enable JavaScript to run this app.\",\n)\n```\n\n### Flask Example\n\n```python\nfrom flask import Flask, render_template\n\nfrom flask_vite_transporter import ViteTransporter\n\n\ndef create_app():\n    app = Flask(__name__)\n    ViteTransporter(app)\n\n    @app.route(\"/\")\n    def index():\n        return render_template(\"index.html\")\n\n    return app\n```\n\n### Quart Example\n\n```python\nfrom quart import Quart, render_template\n\nfrom flask_vite_transporter.quart import QuartViteTransporter\n\n\ndef create_app():\n    app = Quart(__name__)\n    QuartViteTransporter(app)\n\n    @app.route(\"/\")\n    async def index():\n        return await render_template(\"index.html\")\n\n    return app\n```\n\n### CORS\n\nSetting:\n\n```python\nViteTransporter(app, cors_allowed_hosts=[\"http://127.0.0.1:5003\"])\n```\n\nThis is to allow the Vite app to communicate with the app.\n\n### Update the Static URL Path\n\n```python\nViteTransporter(\n  app, \n  cors_allowed_hosts=[\"http://127.0.0.1:5003\"],\n  static_url_path=\"/nested/system/--vite--\"\n)\n```\n\n```bash\nvt pack transport -sup /nested/system/--vite--\n```\n\nThis is used if you're using nested systems.\n\n**Note:** It's recommended to remove this in production.\n\n## Running the demos\n\nWe will be using a package call\n`pyqwe` to run commands from the pyproject file.\nInstalling the development requirements will install `pyqwe`:\n\n```bash\npip install -r requirements/tests.txt\n```\n\nUse `pyqwe` to install the local version of flask-vite-transporter:\n\n```bash\npyqwe install\n```\n\nThe `serve_app` under `tool.flask_vite_transporter` is currently set to use\nthe Flask demo app.\n\n```bash\npyqwe flask_plus_vite\n```\n\nYou should be able to visit the Flask app and the Vite app from the link in\nthe terminal. Change something in the Vite app, save, then in a separate\nterminal run:\n\n```bash\nvt pack transport\n```\n\nThe Vite app will be compiled, and the files will be moved to the Flask app.\nVisiting the Flask app from the link in the terminal should show the changes.\n\n## Things to note\n\nWhen including credentials in fetch requests in the vite app.\nYou must visit the serve app first to set the credentials.\n\nFor example, if the serve app is running on `http://127.0.0.1:5001`,\nyou must visit this address first.\n\nThis won't be needed in production, as it's expected that the Vite\napp will be served from the same domain.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheesecake87%2Fflask-vite-transporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheesecake87%2Fflask-vite-transporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheesecake87%2Fflask-vite-transporter/lists"}