{"id":14065288,"url":"https://github.com/abilian/flask-vite","last_synced_at":"2025-06-10T17:02:06.867Z","repository":{"id":57673220,"uuid":"481555913","full_name":"abilian/flask-vite","owner":"abilian","description":"Plugin to simplify use of Vite from Flask.","archived":false,"fork":false,"pushed_at":"2025-03-06T11:52:52.000Z","size":174,"stargazers_count":63,"open_issues_count":7,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T06:40:44.032Z","etag":null,"topics":["flask","python","vite"],"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/abilian.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"AUTHORS.rst","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-14T10:06:42.000Z","updated_at":"2025-03-17T05:32:20.000Z","dependencies_parsed_at":"2024-05-28T00:29:57.888Z","dependency_job_id":"7d4f658a-e37c-4edb-884a-d5592879a912","html_url":"https://github.com/abilian/flask-vite","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abilian%2Fflask-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abilian%2Fflask-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abilian%2Fflask-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abilian%2Fflask-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abilian","download_url":"https://codeload.github.com/abilian/flask-vite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abilian%2Fflask-vite/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258841291,"owners_count":22766288,"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":["flask","python","vite"],"created_at":"2024-08-13T07:04:24.699Z","updated_at":"2025-06-10T17:02:06.803Z","avatar_url":"https://github.com/abilian.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"# Flask-Vite\n\n[![image](https://img.shields.io/pypi/v/flask-tailwind.svg)](https://pypi.python.org/pypi/flask-tailwind)\n\nPlugin to simplify use of Vite from Flask.\n\n-   Status: Bêta.\n-   Free software: MIT license\n\n\n## Usage\n\nInstantiate the Flask extension as you do for other Flask extensions:\n\n```python\nfrom flask_vite import Vite\n\napp = Flask(...)\nvite = Vite(app)\n\n# or\nvite = Vite()\nvite.init_app(app)\n```\n\nThen you can use the following commands:\n\n```text\n$ flask vite\nUsage: flask vite [OPTIONS] COMMAND [ARGS]...\n\nPerform Vite operations.\n\nOptions:\n--help  Show this message and exit.\n\nCommands:\nbuild          Build the Vite assets.\ncheck-updates  Check outdated Vite dependencies.\ninit           Init the vite/ directory (if it doesn't exist)\ninstall        Install the dependencies using npm.\nstart          Start watching source changes for dev.\nupdate         Update Vite and its dependencies, if needed.\n```\n\n## Example Workflow\nThis section assumes you have already added Flask-Vite to your Flask app with the steps above.\n\n### Step 1: Initialize your /vite subdirectory\n```text\n# First, create the /vite subdirectory in your Flask app's root folder\n$ flask vite init\n\n# Install any dependencies\n$ flask vite install\n```\n\n### Step 2: Now you are ready to begin development\n```text\n# Start a local Vite dev server.\n# This will hot-reload any changes in the /vite subdirectory, so it's suited for local development.\n$ flask vite start\n\n# Make any changes in vite/main.js, such as importing React/Vue components.\n# Flask-Vite assumes you have a single entry point at vite/main.js, such as a React SPA (single page application).\n```\n\n**You should now be able to see any changes you have made in your Flask app. If not, try [Troubleshooting](#troubleshooting).**\n\n### Step 3: Ready for production\nOnce you are ready for production, you need to build your assets.\n```text\n# Build assets based on /vite/vite.config.js\n$ flask vite build\n```\n\nYou should now see files like `/vite/dist/assets/index-f16ca036.js`.\n\n**If you are running your Flask app in production mode (ie _without_ app.debug), you should see these asset files included in your Flask Jinja templates automatically. If not, try [Troubleshooting](#troubleshooting).**\n\n## Features\n\n- Manages a `vite` directory where you put your front-end source code.\n- Auto-injects vite-generated assets into your HTML pages (if `VITE_AUTO_INSERT` is set in the Flask config).\n- Use `{{ vite_tags() }}` in your Jinja templates otherwise.\n- If you run Flask in `host_matching` mode, you can tell Vite which host to mount its own views on. You can configure this when instantiating Vite or when calling `init_app`:\n  - Pass `vite_routes_host` the specific single host to serve its assets from.\n  - Pass `vite_routes_host` as the wildcard value `*` to serve vite assets from the same domain as the current request.\n\n\n## Configuration\n\nThe following (Flask) configuration variables are available:\n\n- `VITE_AUTO_INSERT`: if set, the extension will auto-insert the Vite assets into your HTML pages.\n- `VITE_NPM_BIN_PATH`: path to the `npm` binary. Defaults to `npm`.\n- `VITE_FOLDER_PATH`: path for the vite project. Defaults to `vite` locally.\n\n\n## Demo\n\nSee the `demo/` directory for a working demo using TailwindCSS.\n\n## Troubleshooting\n\n### I can't see my vite output files (eg React/Vue components) in my Jinja templates\n- Flask-Vite will automatically add these files to your templates if you either:\n  - set `VITE_AUTO_INSERT=True` in your Flask config\n  - OR, explicitly include `{{ vite_tags() }}` somewhere in your Jinja templates\n\nEither of these options will insert \u0026lt;script\u0026gt; tags into your Jinja templates, which will be the output of your vite config.\n\n### Script tags are included in my Jinja templates, but they're not loading\n- If your Flask app is running in debug mode (ie app.debug):\n  - your HTML should have a line like `\u003cscript type=\"module\" src=\"http://localhost:3000/main.js\"\u003e\u003c/script\u003e`\n  - If this file isn't loading it's because your local Vite dev server isn't running. Start it by using `flask vite start`\n- If your Flask app is running in production mode (ie _not_ app.debug):\n  - your HTML should have a line like `\u003cscript type=\"module\" src=\"/_vite/index-f16ca036.js\"\u003e\u003c/script\u003e` (the hash in `index-[hash].js` will change every time)\n  - you should find this file in `/vite/dist/assets/index-f16ca036.js`. If not, you can build for production again using `flask vite build`\n\n\n## Credits\n\nThis project is inspired by the\n[Django-Tailwind](https://github.com/timonweb/django-tailwind) project and was previously known as `Flask-Tailwind`.\n\nThis package was created with\n[Cookiecutter](https://github.com/audreyr/cookiecutter), using the\n[abilian/cookiecutter-abilian-python](https://github.com/abilian/cookiecutter-abilian-python)\nproject template.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabilian%2Fflask-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabilian%2Fflask-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabilian%2Fflask-vite/lists"}