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:
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,
|
||||
},
|
||||
})
|
||||
Reference in new issue
Block a user