From 856e27af57e55b94d0585a451c5a05a984a887f4 Mon Sep 17 00:00:00 2001 From: David Schrooten Date: Tue, 22 Nov 2022 09:36:15 +0100 Subject: [PATCH] Add vite instructions to README.md --- README.md | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 136 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 27bc667..e03a491 100644 --- a/README.md +++ b/README.md @@ -30,16 +30,147 @@ MIDDLEWARE = [ ] ``` -Finally, create a layout which exposes `{% block inertia %}{% endblock %}` in the body and set the path to this layout as `INERTIA_LAYOUT` in your `settings.py` file. +#### Vite Installation -Now you're all set! +Before you start it's recommended to start a new app. For this example we created a app called `core`. + +Install the following python packages via pip +```bash +pip install django-vite whitenoise +``` + +Create a layout template file +```html +{% load django_vite %} + + + + + + + {% vite_hmr_client %} + {% vite_asset 'main.ts' %} + + Inertia Layout + + + + {% block inertia %}{% endblock %} + + +``` + +Add the Inertia app to your `INSTALLED_APPS` in `settings.py` +``` +INSTALLED_APPS = [ + # django apps, + 'inertia', + 'django_vite', + # your project's apps, +] +``` + +Add whitenoise middleware in `settings.py` +```python +MIDDLEWARE = [ + # ... + "django.middleware.security.SecurityMiddleware", + "whitenoise.middleware.WhiteNoiseMiddleware", + # ... +] +``` + +Add the following in `settings.py` +```python +import re + +# 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 / "core" / "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 + +STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH] + +# Inertia settings +INERTIA_LAYOUT = BASE_DIR / "core" / "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 +``` + +This will be all for the frontend side. ### Frontend -Django specific frontend docs coming soon. For now, we recommend installing [django_vite](https://github.com/MrBin99/django-vite) -and following the commits on the Django Vite [example repo](https://github.com/MrBin99/django-vite-example). Once Vite is setup with -your frontend of choice, just replace the contents of `entry.js` with [this file (example in react)](https://github.com/BrandonShar/inertia-rails-template/blob/main/app/frontend/entrypoints/application.jsx) +Easiest way to start is by creating a new vite app. In this example we create a svelte-ts vite project outside the django directory. + +```bash +# npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template svelte-ts +``` + +Then copy `vite.config.js` `package.json` to the root folder of your django app. + +Modify `vite.config.js` +```javascript +import { defineConfig } from 'vite' +import { resolve } from "path" +import { svelte } from '@sveltejs/vite-plugin-svelte' +// https://vitejs.dev/config/ + +export default defineConfig({ + plugins: [svelte({ prebundleSvelteLibraries: true })], + root: resolve("./core/static/src"), + base: "/static/", + build: { + outDir: resolve("./core/static/dist"), + assetsDir: "", + manifest: true, + emptyOutDir: true, + rollupOptions: { + // Overwrite default .html entry to main.ts in the static directory + input: resolve("./core/static/src/main.ts"), + }, + }, +}) +``` + +In `core/static/` we create a `dist` and `src` folder +And in `core/static/src/main.ts` we setup inertia. + +```typescript +import 'vite/modulepreload-polyfill' +import { createInertiaApp } from '@inertiajs/inertia-svelte' +import { InertiaProgress } from '@inertiajs/progress' + +const pages = import.meta.glob('./**/*.svelte') + +InertiaProgress.init() + +createInertiaApp({ + resolve: name => pages[`./pages/${name}.svelte`](), + setup({ el, App, props }) { + new App({ target: el, props }) + }, +}) +``` +The frontend part works the same for most frameworks. So it's easy to modify. +For the vitejs svelte plugin `prebundleSvelteLibraries: true` must be set for it to work. You can also check out the official Inertia docs at https://inertiajs.com/.