A simple Django app to integrate Vite.js easily in your Django project.
Project description
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!
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file django-simple-vite-1.0.0.tar.gz.
File metadata
- Download URL: django-simple-vite-1.0.0.tar.gz
- Upload date:
- Size: 4.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.8.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | b41f5c479209e7d712afb9f83757bc415d3cd05f7f0ec42304411667377012b0 |
|
| MD5 | da97af75155c889562c4432b1df5df9e |
|
| BLAKE2b-256 | 607062a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3 |
File details
Details for the file django_simple_vite-1.0.0-py3-none-any.whl.
File metadata
- Download URL: django_simple_vite-1.0.0-py3-none-any.whl
- Upload date:
- Size: 4.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.8.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | c775f117650591128bae88ab7343f7bbd2e3833fbc7284820172c1f77f5addac |
|
| MD5 | 40f812a47b69a0739ce418de3eeddea8 |
|
| BLAKE2b-256 | 0c38c112586541e19563a73d2c4db8b8e3b433598947083f6e2b174a6ed1fcdd |
