{"id":23399559,"url":"https://github.com/bansheetech/vite_fusion","last_synced_at":"2025-04-11T18:07:40.455Z","repository":{"id":267710384,"uuid":"901460896","full_name":"BansheeTech/vite_fusion","owner":"BansheeTech","description":"Seamlessly integrate Vite-generated assets with Flask for modern web development.","archived":false,"fork":false,"pushed_at":"2025-01-23T17:15:55.000Z","size":109,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T18:04:14.110Z","etag":null,"topics":["axios","flask","flask-api","flask-application","flask-server","laravel-vite-plugin","python","python3","react","tailwind","tailwindcss","tailwindcss-plugin","vite","vite-plugin","vite-python","vitejs","vue"],"latest_commit_sha":null,"homepage":"https://www.banshee.pro","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/BansheeTech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2024-12-10T17:43:24.000Z","updated_at":"2025-02-28T20:41:01.000Z","dependencies_parsed_at":"2024-12-12T01:21:11.758Z","dependency_job_id":"b99c611c-8531-4f5e-9e08-1a442cbacb20","html_url":"https://github.com/BansheeTech/vite_fusion","commit_stats":null,"previous_names":["bansheetech/vite_fusion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2Fvite_fusion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2Fvite_fusion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2Fvite_fusion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2Fvite_fusion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BansheeTech","download_url":"https://codeload.github.com/BansheeTech/vite_fusion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456369,"owners_count":21106603,"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","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":["axios","flask","flask-api","flask-application","flask-server","laravel-vite-plugin","python","python3","react","tailwind","tailwindcss","tailwindcss-plugin","vite","vite-plugin","vite-python","vitejs","vue"],"created_at":"2024-12-22T10:14:41.313Z","updated_at":"2025-04-11T18:07:40.444Z","avatar_url":"https://github.com/BansheeTech.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite Fusion: Integrating Vite with Flask\n\n**Author**: Claudio González © 2024 Banshee  \n**Website**: [https://www.banshee.pro/](https://www.banshee.pro/)  \n**License**: MIT License\n\n---\n\nThis module provides functions to register and serve Vite generated assets in Flask applications. It supports both the Vite development server and production environments using the `manifest.json` file.\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Parameters](#parameters)\n- [Examples](#examples)\n- [License](#license)\n\n---\n\n## Installation\n\nOn your Python interpreter `pip install vite-fusion` then:\n\n1. Install the required dependencies for Flask and Vite.\n2. Copy the `register_vite_assets` function into your project.\n\n---\n\n## Usage\n\nAfter initializing your Flask application, call the `register_vite_assets` function to integrate Vite assets.\n\n### Example Usage:\n\n```python\nfrom vite_fusion import register_vite_assets\n\napp = Flask(__name__)\n\nregister_vite_assets(\n    app,\n    dev_mode=True,\n    dev_server_url=\"http://localhost:5173\",\n    manifest_path=\"src/dist/.vite/manifest.json\",\n    nonce_provider=my_nonce_provider,  # Optional\n    logger=my_logger                   # Optional\n)\n```\n\n---\n\n## Parameters\n\n| Parameter        | Type                       | Description                                                                                      | Default Value                    |\n| ---------------- | -------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------- |\n| `app`            | `Flask`                    | The Flask application instance.                                                                  | **Required**                     |\n| `dev_mode`       | `bool`                     | Indicates if the Vite development server is running.                                             | `True`                           |\n| `dev_server_url` | `str`                      | URL of the Vite development server (e.g., `http://localhost:5173`).                              | `\"http://localhost:5173\"`        |\n| `dist_path`      | `str`                      | Production Dist Path (e.g., `/src/dist` or `/homedock-vue3/dist`).                               | `\"/src/dist\"`        |\n| `manifest_path`  | `str`                      | Path to the production `manifest.json` generated by Vite.                                        | `\"src/dist/.vite/manifest.json\"` |\n| `nonce_provider` | `callable` or `None`       | Function returning a `nonce` (string) for CSP headers. If `None`, no `nonce` attribute is added. | `None`                           |\n| `logger`         | `logging.Logger` or `None` | Logger instance for errors and warnings. If `None`, logging is disabled.                         | `None`                           |\n\n---\n\n## manifest.json in dev mode?\n\nAlthough accessing the `manifest.json` file in development mode is not a common practice, we concluded that searching for and loading files directly from it in development mode, without needing to set up an array of files, is the most appropriate approach. As a result, the `manifest.json` file must be available in both development and production environments. This is why we recommend running npm run build before starting to use this integration.\n\n---\n\n## Examples\n\n### Registering Vite Assets in Development Mode\n\n```python\nregister_vite_assets(\n    app,\n    dev_mode=True,\n    dev_server_url=\"http://localhost:5173\",\n    manifest_path=\"src/dist/.vite/manifest.json\"\n)\n```\n\n### Registering Vite Assets in Production Mode\n\n```python\nregister_vite_assets(\n    app,\n    dev_mode=False,\n    dev_server_url=\"http://localhost:5173\",\n    dist_path=\"/src/dist\"\n    manifest_path=\"src/dist/.vite/manifest.json\",\n    nonce_provider=my_nonce_provider\n)\n```\n\nor\n\n```python\nregister_vite_assets(\n    homedock_www,\n    dev_mode=False,\n    dev_server_url=\"http://localhost:5173\",\n    dist_path=\"/src/dist\"\n    manifest_path=\"src/dist/.vite/manifest.json\",\n    nonce_provider=nonce_value,\n    logger=None\n)\n```\n\n---\n\n## How can I make it work?\n\nEnsure that Flask is set up to serve the directories and files Vite needs to load. This includes the `static` folder during development and the `dist` folder for production. You can do this by adding the following code to your Flask app:\n\n```python\n\nfrom flask import send_from_directory\n\ndef send_src_static(path):\n    return send_from_directory(os.path.join(app.root_path, \"src\", \"static\"), path)\n\ndef send_src_dist(path):\n    return send_from_directory(os.path.join(app.root_path, \"src\", \"dist\"), path)\n```\n\nThis makes Flask capable of serving files from your `./src` folder. (Make sure it fits your dist_path)\n\nUpdate your `vite.config.js` to look something like this:\n\n```javascript\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport { resolve } from \"path\";\n\nexport default defineConfig({\n  build: {\n    outDir: \"src/dist\",\n    manifest: true,\n    rollupOptions: {\n      input: {\n        global: resolve(__dirname, \"src/static/css/global.css\"),\n        anyOtherCSSFile: resolve(__dirname, \"src/static/css/otherCSS.css\"),\n        mainfileExample: resolve(__dirname, \"src/static/js/mainfile_example.js\"),\n        externalImportsExample: resolve(__dirname, \"src/static/js/externalImports_example.js\"),\n      },\n    },\n  },\n});\n```\n\nThe `manifest: true` setting is critical. After configuring it, run an initial build to generate the `manifest.json`. This manifest maps your assets to the correct files, ensuring Flask knows how to locate them.\n\nFor development mode, make sure `manifest.json` is also accessible, as it’s required for Vite Hot Reloading (HR) and file resolution through vite-fusion. Without the manifest, Flask won't be able to locate the correct files, even in development.\n\nThe same logic used for JavaScript file injection applies to CSS files. Ensure they are also ingested through the manifest.\n\nAfter that you will be able to load Vite generated assets on your Jinja2 templates such as this:\n\n```jinja2\n{{ vitecss(\"global\") | safe }}\n{{ vitecss(\"anyOtherCSSFile\") | safe }}\n{{ vitejs(\"mainfileExample\") | safe }}\n{{ vitejs(\"externalImportsExample\") | safe }}\n```\n\nWorks properly with Vue, React, Tailwind etc...\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n\n---\n\n## About This Integration\n\nThis integration was heavily inspired by **Laravel-Vite-Plugin**. While it may not be as feature-rich, it was designed to deliver a similar functionality and workflow tailored for **HomeDock OS**, one of our Python projects. HomeDock OS is a robust and versatile platform for home automation and cloud management. Learn more at [homedock.cloud](https://www.homedock.cloud).\n\n***It's time to stop relegating the backend to being just an API. With integrations like this, we can truly unlock a seamless and efficient full-stack experience, with proper collaboration between frontend and backend development.***\n\n\n---\n\n## Contributing and Support\n\nFeel free to fork this repository and contribute! For any bug fixes, security concerns, or other issues, please email us at [claudio@banshee.pro](mailto:claudio@banshee.pro).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansheetech%2Fvite_fusion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbansheetech%2Fvite_fusion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansheetech%2Fvite_fusion/lists"}