# django-simple-vite
A simple Django app to integrate Vite.js easily in your Django project.
## Install:
```
pip install django-simple-vite
```
Then add `simple_vite` to `INSTALLED_APPS` in Django settings.
```
INSTALLED_APPS = [
...
'simple_vite',
...
]
```
## Settings:
During development, set `VITE_SERVER_URL` in Django settings, pointing to the Vite.js development server, e.g.:
```
VITE_SERVER_URL = 'http://localhost:3000'
```
When in production, you don't need to set `VITE_SERVER_URL`, because the compiled assets produced by Vite.js will be served as regular static files.
## Usage:
------
Create an app that will contain your Vite.js powered frontend:
```
./manage.py startapp frontend
```
Inside your app, create a `vite_src` directory (the name is arbitrary). This directory will contain your Javascript sources, that will be compiled by Vite.js.
In the `vite_src` directory, create a `vite.config.js` file, with this content:
```
const { resolve } = require('path');
export default {
build: {
manifest: true, // adds a manifest.json
rollupOptions: {
input: [
// Use main.js file as entrypoint for your JS app.
resolve(__dirname, './main.js'),
]
},
// Puts the Vite.js manifest.json in
// PROJECT_ROOT/frontend/static/
outDir: '../static',
// puts compiled asset files (js, css) in
// PROJECT_ROOT/frontend/static/frontend
assetsDir: 'frontend',
},
plugins: [],
server: {
// This port should match with VITE_SERVER_URL Django setting.
port: 3000,
open: false,
}
};
```
In the `vite_src` directory, create a `main.js` file, that will serve as entry point for your app, with this content:
```
// Add this at the beginning of your app entry.
import 'vite/modulepreload-polyfill';
import 'main.css';
console.log("hello world");
```
`main.css` is a CSS file that will be imported by Vite and used by your application.
Install Vite.js in your `vite_src` directory:
```
yarn add vite
```
Add a couple of script in your `package.json`:
```
{
"dependencies": {
"vite": "^4.1.4"
},
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
```
Launch Vite.js server:
```
yarn dev
```
Create a Django template `index.html` that will hold the HTML markup used by your application, save it inside your `frontend` Django app in a subdirectory `templates/frontend/`.
```
{% load vite %}
<html>
<head>
{% vite_styles 'main.js' %}
</head>
<body>
<h1>Hello world</h1>
{% vite_scripts 'main.js' %}
</body>
</html>
```
Now create a Django URLConf that will serve the above template, and you'll see a basic Vite.js powered web app, with Hot Module Replacement (HMR) enabled!
Raw data
{
"_id": null,
"home_page": "https://github.com/baxeico/django-simple-vite",
"name": "django-simple-vite",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "django,vitejs",
"author": "Augusto Destrero",
"author_email": "augusto@guguweb.com",
"download_url": "https://files.pythonhosted.org/packages/60/70/62a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3/django-simple-vite-1.0.0.tar.gz",
"platform": null,
"description": "# django-simple-vite\n\nA simple Django app to integrate Vite.js easily in your Django project.\n\n\n## Install:\n\n```\npip install django-simple-vite\n```\n\nThen add `simple_vite` to `INSTALLED_APPS` in Django settings.\n\n```\nINSTALLED_APPS = [\n ...\n 'simple_vite',\n ...\n]\n```\n\n## Settings:\n\nDuring development, set `VITE_SERVER_URL` in Django settings, pointing to the Vite.js development server, e.g.:\n\n```\nVITE_SERVER_URL = 'http://localhost:3000'\n```\n\nWhen in production, you don't need to set `VITE_SERVER_URL`, because the compiled assets produced by Vite.js will be served as regular static files.\n\n## Usage:\n------\n\nCreate an app that will contain your Vite.js powered frontend:\n\n```\n./manage.py startapp frontend\n```\n\nInside your app, create a `vite_src` directory (the name is arbitrary). This directory will contain your Javascript sources, that will be compiled by Vite.js.\n\nIn the `vite_src` directory, create a `vite.config.js` file, with this content:\n\n```\nconst { resolve } = require('path');\n\nexport default {\n build: {\n manifest: true, // adds a manifest.json\n rollupOptions: {\n input: [\n // Use main.js file as entrypoint for your JS app.\n resolve(__dirname, './main.js'),\n ]\n },\n // Puts the Vite.js manifest.json in\n // PROJECT_ROOT/frontend/static/\n outDir: '../static',\n // puts compiled asset files (js, css) in\n // PROJECT_ROOT/frontend/static/frontend\n assetsDir: 'frontend',\n },\n plugins: [],\n server: {\n // This port should match with VITE_SERVER_URL Django setting.\n port: 3000,\n open: false,\n }\n};\n```\n\nIn the `vite_src` directory, create a `main.js` file, that will serve as entry point for your app, with this content:\n\n```\n// Add this at the beginning of your app entry.\nimport 'vite/modulepreload-polyfill';\nimport 'main.css';\n\nconsole.log(\"hello world\");\n```\n\n`main.css` is a CSS file that will be imported by Vite and used by your application.\n\nInstall Vite.js in your `vite_src` directory:\n\n```\nyarn add vite\n```\n\nAdd a couple of script in your `package.json`:\n\n```\n{\n \"dependencies\": {\n \"vite\": \"^4.1.4\"\n },\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\"\n }\n}\n```\n\nLaunch Vite.js server:\n\n```\nyarn dev\n```\n\nCreate a Django template `index.html` that will hold the HTML markup used by your application, save it inside your `frontend` Django app in a subdirectory `templates/frontend/`.\n\n```\n{% load vite %}\n\n<html>\n<head>\n {% vite_styles 'main.js' %}\n</head>\n<body>\n <h1>Hello world</h1>\n\n {% vite_scripts 'main.js' %}\n</body>\n\n</html>\n```\n\nNow create a Django URLConf that will serve the above template, and you'll see a basic Vite.js powered web app, with Hot Module Replacement (HMR) enabled!\n\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A simple Django app to integrate Vite.js easily in your Django project.",
"version": "1.0.0",
"split_keywords": [
"django",
"vitejs"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "0c38c112586541e19563a73d2c4db8b8e3b433598947083f6e2b174a6ed1fcdd",
"md5": "40f812a47b69a0739ce418de3eeddea8",
"sha256": "c775f117650591128bae88ab7343f7bbd2e3833fbc7284820172c1f77f5addac"
},
"downloads": -1,
"filename": "django_simple_vite-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "40f812a47b69a0739ce418de3eeddea8",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 4723,
"upload_time": "2023-03-16T13:41:22",
"upload_time_iso_8601": "2023-03-16T13:41:22.142763Z",
"url": "https://files.pythonhosted.org/packages/0c/38/c112586541e19563a73d2c4db8b8e3b433598947083f6e2b174a6ed1fcdd/django_simple_vite-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "607062a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3",
"md5": "da97af75155c889562c4432b1df5df9e",
"sha256": "b41f5c479209e7d712afb9f83757bc415d3cd05f7f0ec42304411667377012b0"
},
"downloads": -1,
"filename": "django-simple-vite-1.0.0.tar.gz",
"has_sig": false,
"md5_digest": "da97af75155c889562c4432b1df5df9e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 4613,
"upload_time": "2023-03-16T13:41:24",
"upload_time_iso_8601": "2023-03-16T13:41:24.285445Z",
"url": "https://files.pythonhosted.org/packages/60/70/62a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3/django-simple-vite-1.0.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-03-16 13:41:24",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "baxeico",
"github_project": "django-simple-vite",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"circle": true,
"lcname": "django-simple-vite"
}
JSON
