From ad586942065af53ccca33b34628d7b11f142defb Mon Sep 17 00:00:00 2001 From: S4NKALP Date: Sun, 10 May 2026 23:58:24 +0545 Subject: [PATCH] =?UTF-8?q?feat(src/djinit/templates):=20introduceVite?= =?UTF-8?q?=E2=80=91powered=20React=20frontend=20scaffold=20and=20django?= =?UTF-8?q?=E2=80=91vite=20integration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../templates/config/settings/base.py-tpl | 10 ++++++++ .../templates/project/docker-compose.yml-tpl | 6 ++++- .../templates/project/frontend/index.html-tpl | 12 +++++++++ .../project/frontend/src/App.jsx-tpl | 11 ++++++++ .../project/frontend/src/index.css-tpl | 14 +++++++++++ .../project/frontend/src/main.jsx-tpl | 10 ++++++++ src/djinit/templates/project/package.json-tpl | 23 +++++++++++++++++ src/djinit/templates/project/requirements-tpl | 1 + .../templates/project/vite.config.js-tpl | 25 +++++++++++++++++++ 9 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 src/djinit/templates/project/frontend/index.html-tpl create mode 100644 src/djinit/templates/project/frontend/src/App.jsx-tpl create mode 100644 src/djinit/templates/project/frontend/src/index.css-tpl create mode 100644 src/djinit/templates/project/frontend/src/main.jsx-tpl create mode 100644 src/djinit/templates/project/package.json-tpl create mode 100644 src/djinit/templates/project/vite.config.js-tpl diff --git a/src/djinit/templates/config/settings/base.py-tpl b/src/djinit/templates/config/settings/base.py-tpl index 15a5da0..2230e57 100644 --- a/src/djinit/templates/config/settings/base.py-tpl +++ b/src/djinit/templates/config/settings/base.py-tpl @@ -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 diff --git a/src/djinit/templates/project/docker-compose.yml-tpl b/src/djinit/templates/project/docker-compose.yml-tpl index 5ff1e29..f5c76a8 100644 --- a/src/djinit/templates/project/docker-compose.yml-tpl +++ b/src/djinit/templates/project/docker-compose.yml-tpl @@ -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 diff --git a/src/djinit/templates/project/frontend/index.html-tpl b/src/djinit/templates/project/frontend/index.html-tpl new file mode 100644 index 0000000..061c342 --- /dev/null +++ b/src/djinit/templates/project/frontend/index.html-tpl @@ -0,0 +1,12 @@ + + + + + + [[ project_name ]] + + +
+ + + \ No newline at end of file diff --git a/src/djinit/templates/project/frontend/src/App.jsx-tpl b/src/djinit/templates/project/frontend/src/App.jsx-tpl new file mode 100644 index 0000000..ca1351e --- /dev/null +++ b/src/djinit/templates/project/frontend/src/App.jsx-tpl @@ -0,0 +1,11 @@ +function App() { + return ( +
+

Welcome to [[ project_name ]]

+

This is your React frontend powered by Vite.

+

Edit frontend/src/App.jsx to get started!

+
+ ) +} + +export default App \ No newline at end of file diff --git a/src/djinit/templates/project/frontend/src/index.css-tpl b/src/djinit/templates/project/frontend/src/index.css-tpl new file mode 100644 index 0000000..285bf63 --- /dev/null +++ b/src/djinit/templates/project/frontend/src/index.css-tpl @@ -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; +} \ No newline at end of file diff --git a/src/djinit/templates/project/frontend/src/main.jsx-tpl b/src/djinit/templates/project/frontend/src/main.jsx-tpl new file mode 100644 index 0000000..0291fe5 --- /dev/null +++ b/src/djinit/templates/project/frontend/src/main.jsx-tpl @@ -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( + + + , +) \ No newline at end of file diff --git a/src/djinit/templates/project/package.json-tpl b/src/djinit/templates/project/package.json-tpl new file mode 100644 index 0000000..bffd678 --- /dev/null +++ b/src/djinit/templates/project/package.json-tpl @@ -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" + } +} \ No newline at end of file diff --git a/src/djinit/templates/project/requirements-tpl b/src/djinit/templates/project/requirements-tpl index bfefe12..9dbb655 100644 --- a/src/djinit/templates/project/requirements-tpl +++ b/src/djinit/templates/project/requirements-tpl @@ -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 diff --git a/src/djinit/templates/project/vite.config.js-tpl b/src/djinit/templates/project/vite.config.js-tpl new file mode 100644 index 0000000..5d5a63b --- /dev/null +++ b/src/djinit/templates/project/vite.config.js-tpl @@ -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, + }, +}) \ No newline at end of file