Manage Vitejs frontends for Django
Project description
Django Vite Vue
Manage Vitejs frontends and compile them to Django static files and templates. Some management commands are available:
- viteconf: generate a Vitejs compilation configuration
- tsmodels: generate Typescript models from Django models
- tsapi: scaffold an api for the generated frontend models
Install
pip install django-vitevue
Add "vv",
to INSTALLED_APPS
Make sure these basic Django settings are present:
TEMPLATES = [
{
"DIRS": [BASE_DIR / "templates"],
# ...
},
]
STATICFILES_DIRS = [
BASE_DIR / "static",
]
STATIC_URL = "/static/"
Configuration of a Vitejs app
A management command is available to configure some Vitejs frontends compilation options and commands. First create a frontend in the parent folder of the Django project with a command like:
yarn create vite frontend --template=vue-ts
Settings
The root directory can be configured by a setting. By default it is the parent directory of the Django's BASE_DIR. Example setting:
VV_BASE_DIR = Path("/some/directory")
Generate the Vitejs config
If the folder is named frontend the command can run without arguments:
python {project_name}/manage.py viteconf
Otherwise add the app folder name as an argument:
python {project_name}/manage.py viteconf --app=my_frontend_app_folder_name
This command will do the following things:
- Generate compilation options for the vite.config.js or vite.config.ts file
- Generate npm build commands for package.json
- Check if all the required npm dependencies are installed
The command runs in dry mode and outputs the config. To write to config files
use the -w
flag:
python {project_name}/manage.py viteconf -w
Configure templates and static files destination
The npm build command will be configured to output to the Django static file folder and an index.html template. To change these options use these command flags:
--template=mytemplate.html
: the template to compile to. Relative to the django templates dir
--static=myfolder
: the static folder to compile assets to. Relative to the first staticfiles dir
Compile to a partial template
By default it will compile a full index page, in single page app mode. It is possible to compile to a static partial template, without the html tags. Use the partial flag:
-p
: the template will not have html tags and can be included in a parent Django template
To configure Vitejs to compile an app in partial mode to a specific template and static folder:
python {project_name}/manage.py viteconf -p --app=partialapp --template=mytemplate.html --static=myfolder
Generate Typescript models
The tsmodels
command can generate Typescript models from Django models:
python {project_name}/manage.py tsmodels my_django_app
To write the models to the frontend app:
python {project_name}/manage.py tsmodels my_django_app -w
Example output:
These Django models:
class Market(models.Model):
name = models.CharField(max_length=255)
class Instrument(models.Model):
name = models.CharField(max_length=255)
class Trade(models.Model):
date = models.DateTimeField()
price = models.FloatField()
quantity = models.FloatField()
market = models.ForeignKey(Market, on_delete=models.CASCADE)
instrument = models.ForeignKey(Instrument, on_delete=models.CASCADE)
side = models.CharField(max_length=4, choices=SIDE)
Output these Typescript models:
// Model Market
import MarketContract from "./contract";
export default class Market {
id: number;
name: string;
constructor ({id, name}: MarketContract) {
this.id=id;
this.name=name
}
static fromJson(data: Record<string, any>): Market {
return new Market(data as MarketContract)
}
}
// -------------- Interface --------------
export default interface MarketContract {
id: number,
name: string,
}
// Model Instrument
import InstrumentContract from "./contract";
export default class Instrument {
id: number;
name: string;
constructor ({id, name}: InstrumentContract) {
this.id=id;
this.name=name
}
static fromJson(data: Record<string, any>): Instrument {
return new Instrument(data as InstrumentContract)
}
}
// -------------- Interface --------------
export default interface InstrumentContract {
id: number,
name: string,
}
// Model Trade
import MarketContract from "../market/contract";
import InstrumentContract from "../instrument/contract";
import TradeContract from "./contract";
export default class Trade {
id: number;
date: string;
price: number;
quantity: number;
market: MarketContract;
instrument: InstrumentContract;
side: string;
constructor ({id, date, price, quantity, market, instrument, side}: TradeContract) {
this.id=id;
this.date=date;
this.price=price;
this.quantity=quantity;
this.market=market;
this.instrument=instrument;
this.side=side
}
static fromJson(data: Record<string, any>): Trade {
return new Trade(data as TradeContract)
}
}
// -------------- Interface --------------
import MarketContract from "../market/contract";
import InstrumentContract from "../instrument/contract";
export default interface TradeContract {
id: number,
date: string,
price: number,
quantity: number,
market: MarketContract,
instrument: InstrumentContract,
side: string,
}
Add an api to the generated frontend models
To scaffold an api for an existing frontend model:
python {project_name}/manage.py tsapi my_django_app_name
Example output
Methods will be added to models. Ex:
export default class Market {
// ...
static async load(id: number | string): Promise<Market> {
const res = await api.get<Record<string, any>>(`/api/market/${id}/`);
return Market.fromJson(res)
}
}
The command will create an api directory containing an helper class: https://github.com/synw/django-vitevue/blob/master/vv/files/api/model.ts
Example
Backend
Create a project directory and initialize a Django project with static and templates folders:
pip install django django-vitevue
mkdir my_project
cd my_project
django-admin createproject my_project
cd my_project
mkdir templates static
cd ..
Add "vv",
to INSTALLED_APPS
Configure the basic settings:
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [BASE_DIR / "templates"],
# ...
},
]
STATICFILES_DIRS = [
BASE_DIR / "static",
]
STATIC_URL = "/static/"
Add an url to view the index template:
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
# ...
path("", TemplateView.as_view(template_name="index.html")),
]
Frontend
Initialize a Vue 3 Typescript frontend:
yarn create vite frontend --template=vue-ts
cd frontend
yarn install
cd ..
Run
Run the migrations:
python my_project/manage.py migrate
Generate the frontend config. Dry run:
python my_project/manage.py viteconf
Install the frontend dev dependencies as indicated in the command output message:
cd frontend
yarn add -D move-file-cli del-cli npm-run-all
cd ..
Then write the config to vite.config.ts and package.json:
python my_project/manage.py viteconf -w
Build the frontend:
cd frontend
yarn build
cd ..
Run the server:
python my_project/manage.py runserver
Example repository: https://github.com/synw/django-vitevue-example
Project details
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
Hashes for django_vitevue-0.4.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 86a2eba02f6ba740cd41a1310d9a566cd5b7514b083a788d5ad34a13ce4e0083 |
|
MD5 | 29a21f0c62867db5cde4871bf0e59032 |
|
BLAKE2b-256 | 621da7f0d8ab5213ab075715f7beb28ad2f2c47eeee3d1a28523af182ac23dcd |