feat(src/djinit/templates): introduceVite‑powered React frontend scaffold and django‑vite integration

Add a minimal React frontend template (index.html, App.jsx, index.css, main.jsx) and configure static asset handling.
Update Docker Compose to populate DATABASE_URL according to the selected database type.
Include django‑vite in the template requirements and settings.

- New Features
  - Scaffold `frontend` directory with React components and Vite entry point.
  - Configure static URLs, root, and alias via `STATIC_URL`, `STATIC_ROOT`, and `DJANGO_VITE_ASSET_SRC`.
- Enhancements
  - Dynamically set `DATABASE_URL` in `docker-compose.yml` for PostgreSQL or MySQL.
  - Add `django-vite` to `THIRD_PARTY_APPS` and `requirements-tpl`.
- Bug Fixes
  - None.
This commit is contained in:
sankalp committed 2026-05-10 23:58:24 +05:45
1 parent 9104b1bd79
commit ad58694206
9 files changed
+111 -1

No files matched your search

@@ -28,6 +28,7 @@ THIRD_PARTY_APPS = [
"drf_spectacular",
"django_tailwind_cli", # @IF use_tailwind
"django_htmx", # @IF use_htmx
"django_vite", # @IF use_vite
]
USER_DEFINED_APPS = [
@@ -225,3 +226,12 @@ TAILWIND_CLI_CONFIG = {
},
}
# @ENDIF
# @IF use_vite
# for django-vite
DJANGO_VITE_ASSET_SRC = "frontend"
DJANGO_VITE_DEV_SERVER_URL = "http://localhost:5173"
STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_DIRS = [BASE_DIR / "static"]
# @ENDIF
@@ -13,7 +13,11 @@ services:
environment:
- DEBUG=1
# @IF use_database_url
- DATABASE_URL= # @IF database_type == 'postgresql' postgresql://postgres:postgres@db:5432/[[ project_name ]] # @IF database_type == 'mysql' mysql://root:root@db:3306/[[ project_name ]]
# @IF database_type == 'postgresql'
- DATABASE_URL=postgresql://postgres:postgres@db:5432/[[ project_name ]]
# @ELSE
- DATABASE_URL=mysql://root:root@db:3306/[[ project_name ]]
# @ENDIF
# @ENDIF
depends_on:
- db
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[[ project_name ]]</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
@@ -0,0 +1,11 @@
function App() {
return (
<div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
<h1>Welcome to [[ project_name ]]</h1>
<p>This is your React frontend powered by Vite.</p>
<p>Edit <code>frontend/src/App.jsx</code> to get started!</p>
</div>
)
}
export default App
@@ -0,0 +1,14 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
}
#root {
min-height: 100vh;
}
@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
@@ -0,0 +1,23 @@
#--------------------------------------------------#
# The following was generated by djinit: #
#--------------------------------------------------#
{
"name": "[[ project_name ]]-frontend",
"version": "0.0.1",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.4",
"vite": "^6.3.5"
}
}
@@ -12,6 +12,7 @@ django-cors-headers
whitenoise
django-tailwind-cli # @IF use_tailwind
django-htmx # @IF use_htmx
django-vite # @IF use_vite
# @IF database_type == 'mysql'
mysqlclient
# @ELSE
@@ -0,0 +1,25 @@
#--------------------------------------------------#
# The following was generated by djinit: #
#--------------------------------------------------#
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
root: 'frontend',
build: {
outDir: '../static/dist',
emptyOutDir: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'frontend/src'),
},
},
server: {
port: 5173,
strictPort: true,
},
})