Skip to content

Instantly share code, notes, and snippets.

@hazho

hazho/README.md

Forked from lucianoratamero/README.md
Created May 21, 2022 12:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hazho/6a7a00cf8f70d5bb7e4a6edd69b44e7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hazho/6a7a00cf8f70d5bb7e4a6edd69b44e7b to your computer and use it in GitHub Desktop.
Download ZIP
Using Vite with Django, the simple way
Raw
README.md

Using Vite with Django, the simple way

This gist has most of the things I've used to develop the frontend using vite inside a monolithic django app.

A couple of things to note:

  • it runs in SPA mode by default. If you want SSR, you may want to look into django_vite;
  • you'll need to enable manifest in your vite configs for production;
  • I've only tested this with a React app, but I'll share my notes when testing with a Svelte app later.

Besides that, just read the comments carefully and everything should work out. Whenever I'm free, I'll make a video about this and add the URL here :]

Raw
base.html
{% load render_vite_bundle %}
<!DOCTYPE html>
<html lang="en">
<!--
For this base.html to work in dev and in production,
you'll need to set a couple of keys inside your settings.py.
Another file in this gist shows which ones you'll really need.
-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
{% if debug %}
<script type="module" src="http://localhost:3000/@vite/client"></script>
<!-- If you're using vite with React, this next script will be needed for HMR -->
<script type="module">
import RefreshRuntime from 'http://localhost:3000/@react-refresh'
if (RefreshRuntime) {
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => { }
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
}
</script>
{% endif %}
</head>
<body>
<div id="root"></div>
{% if debug %}
<!-- This url will be different for each type of app. Point it to your main js file. -->
<script type="module" src="http://localhost:3000/src/main.jsx"></script>
{% else %}
{% render_vite_bundle %}
{% endif %}
</body>
</html>
Raw
render_vite_bundle.py
# This template tag is needed for production
# Add it to one of your django apps (/appdir/templatetags/render_vite_bundle.py, for example)
import os
import json
from django import template
from django.conf import settings
from django.utils.safestring import mark_safe
register = template.Library()
@register.simple_tag
def render_vite_bundle():
"""
Template tag to render a vite bundle.
Supposed to only be used in production.
For development, see other files.
"""
try:
fd = open(f"{settings.VITE_APP_DIR}/dist/manifest.json", "r")
manifest = json.load(fd)
except:
raise Exception(
f"Vite manifest file not found or invalid. Maybe your {settings.VITE_APP_DIR}/dist/manifest.json file is empty?"
)
imports_files = "".join(
[
f'<script type="module" src="/static/{manifest[file]["file"]}"></script>'
for file in manifest["index.html"]["imports"]
]
)
return mark_safe(
f"""<script type="module" src="/static/{manifest['index.html']['file']}"></script>
<link rel="stylesheet" type="text/css" href="/static/{manifest['index.html']['css'][0]}" />
{imports_files}"""
)
Raw
settings.py
# These are the settings you should have for everything to work properly.
# Add these to your main settings.py file, or modify it accordingly.
# Needed for production. Avoid using '*'.
ALLOWED_HOSTS = ['your-production-domain.com']
# Needed for 'debug' to be available inside templates.
# https://docs.djangoproject.com/en/3.2/ref/templates/api/#django-template-context-processors-debug
INTERNAL_IPS = ['127.0.0.1']
# Vite App Dir: point it to the folder your vite app is in.
VITE_APP_DIR = BASE_DIR / "react-vite-app"
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
# You may change these, but it's important that the dist folder is includedself.
# If it's not, collectstatic won't copy your bundle to production.
STATIC_URL = "/static/"
STATICFILES_DIRS = [
VITE_APP_DIR / "dist",
BASE_DIR / "build",
]
STATIC_ROOT = BASE_DIR / "staticfiles"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment