Feat: Inertia, Vue and Vite

.gitignore

@@ -129,4 +129,31 @@ Control.ca-bundle
 Control.system-ca-bundle 
 GitHub.sublime-settings 
 
-.history
+.history
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -1,3 +1,9 @@
 {
-  "recommendations": ["batisteo.vscode-django", "HookyQR.beautify"]
+  "recommendations": [
+    "batisteo.vscode-django",
+    "esbenp.prettier-vscode",
+    "hookyqr.beautify",
+    "ms-python.vscode-pylance",
+    "vue.volar"
+  ]
 }

.vscode/settings.json

@@ -10,9 +10,27 @@
     "**/*.html": "html",
     "**/requirements{/**,*}.{txt,in}": "pip-requirements"
   },
+  "python.analysis.completeFunctionParens": true,
+  "python.analysis.typeCheckingMode": "basic",
   "python.formatting.provider": "black",
+  "python.languageServer": "Pylance",
   "[django-html]": {
     "editor.defaultFormatter": "HookyQR.beautify",
     "editor.tabSize": 2
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

README.md

@@ -0,0 +1,89 @@
+# Inertia + Django + Vite + Vue minimal template
+
+A minimal, working template for Inertia + Django + Vite + Vue.
+
+## Technologies
+
+1. Inertia - powered by the official [Inertia.js Django Adapter](https://github.com/inertiajs/inertia-django)
+2. Django v4.1
+3. Vite 3 - powered by [Django Vite](https://github.com/MrBin99/django-vite)
+4. Vue 3
+5. TypeScript
+6. [WhiteNoise](https://whitenoise.evans.io/en/stable/index.html) - to serve static files
+
+## How to install & run
+
+1. Download the repo. You can either:
+
+   a. Clone the repo (without the git history):
+
+   ```sh
+   npx degit https://github.com/mujahidfa/inertia-django-vite-vue-minimal
+   ```
+
+   b. Or, create a repo based on this template via the [GitHub template generator](https://github.com/mujahidfa/inertia-django-vite-vue-minimal/generate).
+
+2. Install required Python packages.
+
+   ```sh
+   # Create and activate a virtual environment
+   python3 -m venv .venv
+   source .venv/bin/activate
+
+   # Install required Python packages
+   pip install -r requirements.txt
+   ```
+
+3. Install required Ncode.js packages.
+
+   ```sh
+   npm install
+   ```
+
+4. Run the Vite dev server:
+
+   ```sh
+   npm run dev
+   ```
+
+5. Run Django's default migrations:
+
+   ```sh
+   python manage.py migrate
+   ```
+
+6. Run the Django dev server (in a separate terminal):
+
+   ```sh
+   python manage.py runserver
+   ```
+
+## How to build for production
+
+1. Set `DEBUG=False` in [settings.py](./inertia_django_vite_vue_minimal/settings.py).
+
+   ```py
+   # In settings.py
+   ...
+   DEBUG=False
+   ...
+   ```
+
+2. Build the JS/assets for production:
+
+   ```sh
+   npm run build
+   ```
+
+3. Run `collectstatic`:
+
+   ```sh
+   rm -rf staticfiles/
+   python manage.py collectstatic
+   ```
+
+4. Run the Django server:
+
+   ```sh
+   python manage.py runserver
+   ```

app/static/src/main.ts

@@ -0,0 +1,12 @@
+import "vite/modulepreload-polyfill";
+import { createApp, h } from "vue";
+import { createInertiaApp } from "@inertiajs/inertia-vue3";
+
+createInertiaApp({
+  resolve: (name) => import(`./pages/${name}.vue`),
+  setup({ el, app, props, plugin }) {
+    createApp({ render: () => h(app, props) })
+      .use(plugin)
+      .mount(el);
+  },
+});

app/static/src/pages/About.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+defineProps<{
+  pageName: string;
+}>();
+
+const count = ref(0);
+function increment() {
+  count.value++;
+}
+
+const double = computed(() => count.value * 2);
+</script>
+
+<template>
+  <div>
+    <h1 class="title">This is the {{ pageName }} page</h1>
+    <button @click="increment">Add</button>
+    <p>Count: {{ count }}</p>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  color: green;
+}
+</style>

app/static/src/pages/Index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+defineProps<{
+  name: string;
+}>();
+
+const count = ref(0);
+function increment() {
+  count.value++;
+}
+
+const double = computed(() => count.value * 2);
+</script>
+
+<template>
+  <div>
+    <h1 class="title">Hello {{ name }} from Inertia + Django + Vite + Vue!</h1>
+    <button @click="increment">Add</button>
+    <p>Count: {{ count }}</p>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  color: green;
+}
+</style>

app/templates/index.html

@@ -1,15 +1,20 @@
+{% load django_vite %}
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Inertia + Django + Vite + Vue</title>
+
+  {% vite_hmr_client %}
+  {% vite_asset 'main.ts' %}
+
+  <title>Inertia + Django + Vite + Vue minimal</title>
 </head>
 
 <body>
-  <h1>Hello world!</h1>
+  {% block inertia %}{% endblock %}
 </body>
 
 </html>

app/urls.py

@@ -4,4 +4,5 @@
 
 urlpatterns = [
     path("", views.index, name="index"),
+    path("about", views.about, name="about"),
 ]

app/views.py

@@ -1,5 +1,10 @@
-from django.shortcuts import render
+from django.http import HttpRequest
+from inertia import render
 
 
 def index(request):
-    return render(request, "index.html")
+    return render(request, "Index", props={"name": "World"})
+
+
+def about(request):
+    return render(request, "About", props={"pageName": "About"})

inertia_django_vite_vue_minimal/settings.py

@@ -11,6 +11,7 @@
 """
 
 from pathlib import Path
+import re
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -23,7 +24,7 @@
 SECRET_KEY = "django-insecure-0-s3nzb$^1yk(!-_e553a!&b(74^d1rg()vziok)h33!oz)mhv"
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+DEBUG = False
 
 ALLOWED_HOSTS = ["*"]
 
@@ -38,6 +39,8 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "django_vite",
+    "inertia",
     "app",
 ]
 
@@ -50,6 +53,7 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "inertia.middleware.InertiaMiddleware",
 ]
 
 ROOT_URLCONF = "inertia_django_vite_vue_minimal.urls"
@@ -115,6 +119,26 @@
 USE_TZ = True
 
 
+# Default primary key field type
+# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+
+# django-vite settings
+# https://github.com/MrBin99/django-vite
+DJANGO_VITE_DEV_MODE = DEBUG  # follow Django's dev mode
+
+# Where ViteJS assets are built.
+DJANGO_VITE_ASSETS_PATH = BASE_DIR / "app" / "static" / "dist"
+
+# If use HMR or not. We follow Django's DEBUG mode
+DJANGO_VITE_DEV_MODE = DEBUG
+
+# Vite 3 defaults to 5173. Default for django-vite is 3000, which is the default for Vite 2.
+DJANGO_VITE_DEV_SERVER_PORT = 5173
+
+
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.1/howto/static-files/
 
@@ -123,7 +147,19 @@
 # Output directory for collectstatic to put all your static files into.
 STATIC_ROOT = BASE_DIR / "staticfiles"
 
-# Default primary key field type
-# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
+# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
+# when run command python manage.py collectstatic
+STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]
 
-DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+# Inertia settings
+INERTIA_LAYOUT = BASE_DIR / "app" / "templates/index.html"
+
+# Vite generates files with 8 hash digits
+# http://whitenoise.evans.io/en/stable/django.html#WHITENOISE_IMMUTABLE_FILE_TEST
+def immutable_file_test(path, url):
+    # Match filename with 12 hex digits before the extension
+    # e.g. app.db8f2edc0c8a.js
+    return re.match(r"^.+\.[0-9a-f]{8,12}\..+$", url)
+
+
+WHITENOISE_IMMUTABLE_FILE_TEST = immutable_file_test