# Flask-Vite
[](https://pypi.python.org/pypi/flask-tailwind)
Plugin to simplify use of Vite from Flask.
- Status: Bêta.
- Free software: MIT license
## Usage
Instantiate the Flask extension as you do for other Flask extensions:
```python
from flask_vite import Vite
app = Flask(...)
vite = Vite(app)
# or
vite = Vite()
vite.init_app(app)
```
Then you can use the following commands:
```text
$ flask vite
Usage: flask vite [OPTIONS] COMMAND [ARGS]...
Perform Vite operations.
Options:
--help Show this message and exit.
Commands:
build Build the Vite assets.
check-updates Check outdated Vite dependencies.
init Init the vite/ directory (if it doesn't exist)
install Install the dependencies using npm.
start Start watching source changes for dev.
update Update Vite and its dependencies, if needed.
```
## Example Workflow
This section assumes you have already added Flask-Vite to your Flask app with the steps above.
### Step 1: Initialize your /vite subdirectory
```text
# First, create the /vite subdirectory in your Flask app's root folder
$ flask vite init
# Install any dependencies
$ flask vite install
```
### Step 2: Now you are ready to begin development
```text
# Start a local Vite dev server.
# This will hot-reload any changes in the /vite subdirectory, so it's suited for local development.
$ flask vite start
# Make any changes in vite/main.js, such as importing React/Vue components.
# Flask-Vite assumes you have a single entry point at vite/main.js, such as a React SPA (single page application).
```
**You should now be able to see any changes you have made in your Flask app. If not, try [Troubleshooting](#troubleshooting).**
### Step 3: Ready for production
Once you are ready for production, you need to build your assets.
```text
# Build assets based on /vite/vite.config.js
$ flask vite build
```
You should now see files like `/vite/dist/assets/index-f16ca036.js`.
**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).**
## Features
- Manages a `vite` directory where you put your front-end source code.
- Auto-injects vite-generated assets into your HTML pages (if `VITE_AUTO_INSERT` is set in the Flask config).
- Use `{{ vite_tags() }}` in your Jinja templates otherwise.
- 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`:
- Pass `vite_routes_host` the specific single host to serve its assets from.
- Pass `vite_routes_host` as the wildcard value `*` to serve vite assets from the same domain as the current request.
## Configuration
The following (Flask) configuration variables are available:
- `VITE_AUTO_INSERT`: if set, the extension will auto-insert the Vite assets into your HTML pages.
- `NPM_BIN_PATH`: path to the `npm` binary. Defaults to `npm`.
## Demo
See the `demo/` directory for a working demo using TailwindCSS.
## Troubleshooting
### I can't see my vite output files (eg React/Vue components) in my Jinja templates
- Flask-Vite will automatically add these files to your templates if you either:
- set `VITE_AUTO_INSERT=True` in your Flask config
- OR, explicitly include `{{ vite_tags() }}` somewhere in your Jinja templates
Either of these options will insert <script> tags into your Jinja templates, which will be the output of your vite config.
### Script tags are included in my Jinja templates, but they're not loading
- If your Flask app is running in debug mode (ie app.debug):
- your HTML should have a line like `<script type="module" src="http://localhost:3000/main.js"></script>`
- If this file isn't loading it's because your local Vite dev server isn't running. Start it by using `flask vite start`
- If your Flask app is running in production mode (ie _not_ app.debug):
- your HTML should have a line like `<script type="module" src="/_vite/index-f16ca036.js"></script>` (the hash in `index-[hash].js` will change every time)
- you should find this file in `/vite/dist/assets/index-f16ca036.js`. If not, you can build for production again using `flask vite build`
## Credits
This project is inspired by the
[Django-Tailwind](https://github.com/timonweb/django-tailwind) project and was previously known as `Flask-Tailwind`.
This package was created with
[Cookiecutter](https://github.com/audreyr/cookiecutter), using the
[abilian/cookiecutter-abilian-python](https://github.com/abilian/cookiecutter-abilian-python)
project template.
Raw data
{
"_id": null,
"home_page": "https://github.com/abilian/flask-vite",
"name": "flask-vite",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.9",
"maintainer_email": null,
"keywords": null,
"author": "Abilian SAS",
"author_email": "contact@abilian.com",
"download_url": "https://files.pythonhosted.org/packages/fa/64/8fb928ecf67fbc7461e8b3b1beb396ef39e81d28571651144cf7f8aa339a/flask_vite-0.5.1.tar.gz",
"platform": null,
"description": "# Flask-Vite\n\n[](https://pypi.python.org/pypi/flask-tailwind)\n\nPlugin to simplify use of Vite from Flask.\n\n- Status: B\u00eata.\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- `NPM_BIN_PATH`: path to the `npm` binary. Defaults to `npm`.\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 <script> 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 `<script type=\"module\" src=\"http://localhost:3000/main.js\"></script>`\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 `<script type=\"module\" src=\"/_vite/index-f16ca036.js\"></script>` (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\n",
"bugtrack_url": null,
"license": null,
"summary": "Flask+Vite integration.",
"version": "0.5.1",
"project_urls": {
"Homepage": "https://github.com/abilian/flask-vite"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "839b502e9fdf75b6604a4c01ef39e11b4441e4e6b75f073c453d4e5283fb343d",
"md5": "c2cfb1440f8263ac260f1163c1981ce4",
"sha256": "c0525f80deac2dda29408281f7c5ea610b0edb1302c90a64f0c69e69716cd593"
},
"downloads": -1,
"filename": "flask_vite-0.5.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "c2cfb1440f8263ac260f1163c1981ce4",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.9",
"size": 30050,
"upload_time": "2024-07-16T06:35:22",
"upload_time_iso_8601": "2024-07-16T06:35:22.315690Z",
"url": "https://files.pythonhosted.org/packages/83/9b/502e9fdf75b6604a4c01ef39e11b4441e4e6b75f073c453d4e5283fb343d/flask_vite-0.5.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "fa648fb928ecf67fbc7461e8b3b1beb396ef39e81d28571651144cf7f8aa339a",
"md5": "b759768b485e09be4f70e0dabb029d42",
"sha256": "ba1ccf70166dc767167d09471f7c084ba1ea07056f4d396feaea6ae0371d286c"
},
"downloads": -1,
"filename": "flask_vite-0.5.1.tar.gz",
"has_sig": false,
"md5_digest": "b759768b485e09be4f70e0dabb029d42",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.9",
"size": 30759,
"upload_time": "2024-07-16T06:35:24",
"upload_time_iso_8601": "2024-07-16T06:35:24.349095Z",
"url": "https://files.pythonhosted.org/packages/fa/64/8fb928ecf67fbc7461e8b3b1beb396ef39e81d28571651144cf7f8aa339a/flask_vite-0.5.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-07-16 06:35:24",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "abilian",
"github_project": "flask-vite",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"tox": true,
"lcname": "flask-vite"
}
JSON
