{"id":13607720,"url":"https://github.com/protibimbok/django-vite-plugin","last_synced_at":"2026-01-12T07:34:42.742Z","repository":{"id":147584775,"uuid":"618945315","full_name":"protibimbok/django-vite-plugin","owner":"protibimbok","description":"This plugin configures Vite for use with Django backend.","archived":false,"fork":false,"pushed_at":"2025-10-13T12:59:01.000Z","size":259,"stargazers_count":141,"open_issues_count":2,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-11-22T20:14:47.935Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/protibimbok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-03-25T20:01:04.000Z","updated_at":"2025-11-20T01:25:28.000Z","dependencies_parsed_at":"2023-12-02T19:25:58.739Z","dependency_job_id":"ca697d0a-7afb-4be4-924b-abd3cb8c157e","html_url":"https://github.com/protibimbok/django-vite-plugin","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/protibimbok/django-vite-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protibimbok%2Fdjango-vite-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protibimbok%2Fdjango-vite-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protibimbok%2Fdjango-vite-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protibimbok%2Fdjango-vite-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/protibimbok","download_url":"https://codeload.github.com/protibimbok/django-vite-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protibimbok%2Fdjango-vite-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28336544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T06:09:07.588Z","status":"ssl_error","status_checked_at":"2026-01-12T06:05:18.301Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-08-01T19:01:20.978Z","updated_at":"2026-01-12T07:34:42.717Z","avatar_url":"https://github.com/protibimbok.png","language":"Python","funding_links":["https://www.buymeacoffee.com/protibimbok"],"categories":["Python","Integrations with Backends"],"sub_categories":["Django"],"readme":"We stand in solidarity with Palestine against the ongoing [genocide](https://twitter.com/A_Abdelrahman0/status/1720100566368743555) and the brutal [occupation](https://twitter.com/A_Abdelrahman0/status/1732448343639327122).\n\n[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/protibimbok)\n\n# Django Vite Plugin\n\n[![PyPI version](https://badge.fury.io/py/django-vite-plugin.svg)](https://badge.fury.io/py/django-vite-plugin)\n[![npm version](https://img.shields.io/npm/v/django-vite-plugin)](https://www.npmjs.com/package/django-vite-plugin)\n[![npm downloads](https://img.shields.io/npm/dt/django-vite-plugin)](https://www.npmjs.com/package/django-vite-plugin)\n[![Licence](https://img.shields.io/npm/l/django-vite-plugin)](https://www.npmjs.com/package/django-vite-plugin)\n\n## Introduction\n\n[Vite](https://vitejs.dev) is a modern frontend build tool that offers a very fast development experience and bundles your code for production. This plugin sets up Vite for use with a Django backend.\n\n## Installation\n\nInstall the Django app with pip and then install the Vite plugin via npm:\n\n```sh\n# Install the Django package\npip install django_vite_plugin\n\n# Install the Vite plugin\nnpm install django-vite-plugin\n```\n\n## Feature Highlights\n\n1. Simple and elegant  \n2. Static file lookup  \n3. Auto reload  \n4. JavaScript import helpers  \n5. JS import autocompletions  \n6. Production testing\n\n## Usage\n\n### Django\n\nAdd `django_vite_plugin` to the `INSTALLED_APPS` list in your project's `settings.py` file:\n\n```python\nINSTALLED_APPS = [\n    # Other apps\n    'django_vite_plugin',\n    # More apps\n]\n```\n\nUse the following code in your Django templates to load assets:\n\n```django\n{% vite '\u003capp_name\u003e/\u003cpath\u003e/\u003cto\u003e/\u003ccss\u003e/styles.css' %}\n```\n\nTo output additional attributes in the HTML, do this:\n\n```django\n{% vite '---.css' '--.js' crossorigin='anonymus' integrity='some-sha' %}\n```\n\nThis produces:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" crossorigin=\"anonymus\" integrity=\"some-sha\" href=\"---.css\"/\u003e\n\u003cscript src=\"---.js\" type=\"module\" crossorigin=\"anonymus\" integrity=\"some-sha\"\u003e\u003c/script\u003e\n```\n\nNotice that the `\u003cscript\u003e` tag automatically includes `type=\"module\"`. You may change this behavior from the settings.\n\nAssume your `home` app has two files arranged as follows:\n\n```bash\n└── home\n    └── static\n        └── home\n            ├── css\n            │   └── styles.css\n            └── js\n                └── main.js\n```\n\nYour template should look like this:\n\n```django\n{% load vite %}\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003c!-- Other head elements --\u003e\n    \u003c!-- Vite dev client for hot module reload (only used in development) --\u003e\n    {% vite %}\n    {% vite 'home/css/styles.css' 'home/js/main.js' %}\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Page content --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nNotice that instead of using `home/static/home/*/*`, we simply use `home/*/*`. By default the plugin adds `static/\u003capp_name\u003e` after the first segment of the path. This behavior can be adjusted via settings.\n\n#### With React\n\nTo use React, add this in your template file:\n\n```django\n\u003chead\u003e\n    \u003c!-- Other head elements --\u003e\n    {% vite 'react' %}\n    {% vite 'home/css/styles.css' 'home/js/main.js' %}\n\u003c/head\u003e\n```\n\nOr combine them in a single statement:\n\n```django\n\u003chead\u003e\n    \u003c!-- Other head elements --\u003e\n    {% vite 'react' 'home/css/styles.css' 'home/js/main.js' %}\n\u003c/head\u003e\n```\n\n### Vite\n\nIn your `vite.config.js`, include the `django-vite-plugin`:\n\n```javascript\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport { djangoVitePlugin } from 'django-vite-plugin'\n\nexport default defineConfig({\n    plugins: [\n        djangoVitePlugin([\n            'home/js/app.js',\n            'home/css/style.css',\n        ])\n    ],\n});\n```\n\nThe argument may be a string or an array of strings passed to `build.rollupOptions.input`.\n\n\u003e Note: The automatic addition of `static/\u003capp_name\u003e` applies here too.  \n\u003e **All entry points used with `{% vite '...' %}` must be included here.**\n\nRun these commands in separate terminals:\n\n```sh\n# Start the Django development server\npython manage.py runserver\n\n# Start the Vite development server\nnpm run dev\n```\n\nFor production builds, run:\n\n```sh\nnpm run build\n```\n\n\u003e Make sure you run all commands that are related to `django-vite-plugin` from the same python environment as your django project.\n\n## Configuration\n\n`django_vite_plugin` requires no extra configuration for development or building your project. Customizations are done in your `settings.py` file.\n\nThe default configuration is as follows:\n\n```python\nDJANGO_VITE_PLUGIN = {\n    'WS_CLIENT': '@vite/client',\n    'DEV_MODE': getattr(settings, 'DEBUG', True),\n    'BUILD_DIR': getattr(settings, 'STATIC_ROOT') or 'static',\n    'MANIFEST': '\u003cBUILD_DIR\u003e/.vite/manifest.json',\n    'BUILD_URL_PREFIX': getattr(settings, 'STATIC_URL'),\n    'JS_ATTRS': {\n        'type': 'module'\n    },\n    'CSS_ATTRS': {\n        'rel': 'stylesheet',\n        'type': 'text/css'\n    },\n    'STATIC_LOOKUP': True\n}\n```\n\n- **WS_CLIENT**: The Vite client script relative to the dev server URL. In most cases you do not need to change this.  \n- **DEV_MODE**: When `True`, the Vite dev server links assets; otherwise build files are used.  \n- **BUILD_DIR**: The directory where Vite outputs build assets. If you serve assets from another server (for example a CDN), keep the same structure.  \n- **MANIFEST**: The path to the `manifest.json` file. The default is `\u003cBUILD_DIR\u003e/.vite/manifest.json` as per Vite v5. The manifest must remain in this location even if assets are served from another server.  \n- **BUILD_URL_PREFIX**: The URL prefix used in production. If `DEV_MODE` is `False` then all assets listed in `\u003cBUILD_DIR\u003e/manifest.json` receive this prefix. Use this to specify a different server address if needed.  \n- **STATIC_LOOKUP**: If enabled, the plugin inserts `static/\u003capp_name\u003e` after the first segment of the asset path. For example, `\u003capp_name\u003e/file` becomes `\u003capp_name\u003e/static/\u003capp_name\u003e/file`. Set this to `False` to disable the behavior.  \n- **JS_ATTRS**: Attributes added by default to all `\u003cscript\u003e` tags.  \n- **JS_ATTRS_BUILD**: Customize JavaScript attributes for production files (for instance, adding `defer` or changing the type).  \n- **CSS_ATTRS**: Attributes added by default to all `\u003clink rel=\"stylesheet\"\u003e` tags.\n\n### Javascript Options\n\nThe JavaScript configuration options include:\n\n```typescript\n{\n    input: string | string[],\n    root?: string,\n    addAliases?: boolean,\n    pyPath?: string,\n    pyArgs?: string[],\n    reloader?: boolean | (file: string) =\u003e boolean,\n    watch?: string[],\n    delay?: number,\n}\n```\n\n- **input**: The entry points for JavaScript/CSS. Every file used with `{% vite '...' %}` should be listed here.  \n- **root**: The relative path from your `vite.config.js` to your project root. If they are the same, you can omit this.  \n- **addAliases**: Determines whether to add the aliases `@s:\u003capp\u003e` and `@t:\u003capp\u003e` in `jsconfig.json`. If set to `true`, the file is created if it does not exist. The default is to add aliases only if `jsconfig.json` already exists.  \n- **pyPath**: The path to your Python executable (default is `python`).  \n- **pyArgs**: Additional arguments for `manage.py` commands.  \n- **reloader**: Enables browser reload when HTML or Python files change. You may supply a function to check file changes. The default behavior checks for `.html` and `.py` files.  \n- **watch**: A list of extra files to monitor for browser reload. By default, the plugin detects changes in Python files within your apps.  \n- **delay**: The delay in milliseconds before reloading after a file change.\n\nSuppose your `vite.config.js` is inside a `frontend` directory and your project structure is:\n\n```bash\n|-- home\n|   └-- static\n|       └-- home\n|           ├── css\n|           │   └── styles.css\n|           └── js\n|               └── main.js\n└-- frontend\n    └-- vite.config.js\n```\n\nYour `vite.config.js` would then be:\n\n```javascript\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport { djangoVitePlugin } from 'django-vite-plugin'\n\nexport default defineConfig({\n    plugins: [\n        djangoVitePlugin({\n            input: [\n                // Your entry points\n            ],\n            root: '..' // The parent directory\n        })\n    ],\n});\n```\n\n## Features\n\n### 1. Simple and Elegant\n\nYou do not need a separate setup to use Vite. Install the packages, add the configurations, and you are ready to go.\n\n### 2. Static File Lookup\n\nDjango recommends placing static files and templates in `app_name/static/app_name` and `app_name/templates/app_name`. When `STATIC_LOOKUP` is enabled, you can skip the `static/app_name` part in import paths.\n\nFor example, instead of writing:\n\n```django\n{% vite 'app_name/static/app_name/path/to/asset' %}\n```\n\nYou write:\n\n```django\n{% vite 'app_name/path/to/asset' %}\n```\n\nThe behavior of this setting is as follows:\n\n| Vite Argument             | Resulting Asset Path                  |\n|---------------------------|---------------------------------------|\n| app_name/script.js        | app_name/static/app_name/script.js    |\n| app_name/static/script.js | app_name/static/script.js             |\n| static/script.js          | static/script.js                      |\n\nTo disable this behavior, set `STATIC_LOOKUP` to `False`.\n\n\u003e Note: This feature uses Django's built-in static file finder.\n\n### 3. Auto Reload\n\nThe plugin automatically reloads your browser whenever a relevant file is changed.\n\n### 4. JS Import Helpers\n\nSimilar to STATIC_LOOKUP, helpers are available for JavaScript imports. Vite's alias feature is used under the hood. The default aliases are:\n\n| Alias         | Maps to                         |\n|---------------|---------------------------------|\n| @             | \u0026lt;project root\u0026gt;            |\n| @s:\u003capp_name\u003e | \u003capp_path\u003e/static/\u003capp_name\u003e     |\n| @t:\u003capp_name\u003e | \u003capp_path\u003e/templates/\u003capp_name\u003e  |\n\nIf you set `STATIC_LOOKUP` to `False`, the aliases change as follows:\n\n| Alias         | Maps to                    |\n|---------------|----------------------------|\n| @             | \u0026lt;project root\u0026gt;       |\n| @s:\u003capp_name\u003e | \u003capp_path\u003e/static          |\n| @t:\u003capp_name\u003e | \u003capp_path\u003e/templates       |\n\n### 5. JS Import Autocompletions\n\nEnable autocompletions for these import aliases in IDEs that support `jsconfig.json`. Simply add a `jsconfig.json` file in your project's root or alongside `vite.config.js`.\n\nIf you use TypeScript, the paths are added automatically when you run the development command.\n\n### 6. Production Testing\n\nTo verify that your build files work before deploying to production:\n\n1. In your project's `urls.py`, add:\n\n    ```python\n    urlpatterns = [\n        # Other URL patterns\n        path('', include('django_vite_plugin.urls')),\n        # More URL patterns\n    ]\n    ```\n\n2. In `settings.py`, configure:\n\n    ```python\n    STATICFILES_DIRS = [\n        BASE_DIR / 'build'\n    ]\n\n    DJANGO_VITE_PLUGIN = {\n        # Other options\n        'DEV_MODE': False,\n        'BUILD_DIR': 'build'\n    }\n    ```\n\n    Replace `build` with your build directory. Ensure this directory is different from `STATIC_ROOT` if it is set.\n\n3. If your `BUILD_URL_PREFIX` contains `http://` or `https://`, comment it out.\n\n4. Run `npm run build` to build your assets and enjoy the results.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotibimbok%2Fdjango-vite-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotibimbok%2Fdjango-vite-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotibimbok%2Fdjango-vite-plugin/lists"}