lucianoratamero · April 5, 2025 05:47 · lucianoratamero · Feb 8, 2023 · pedrovgp · Feb 10, 2023
diff --git a/README.md b/README.md
diff --git a/base.html b/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/main.jsx"></script>
  {% else %}
  {% render_vite_bundle %}
  {% endif %}
 </body>

 </html>
diff --git a/render_vite_bundle.py b/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}"""
    )
diff --git a/settings.py b/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 / "src"

 # 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",
 ]
 STATIC_ROOT = BASE_DIR / "staticfiles"
diff --git a/vite.config.js b/vite.config.js
 import { defineConfig } from "vite";
 import reactRefresh from "@vitejs/plugin-react-refresh";

 // https://vitejs.dev/config/
 export default defineConfig({
  build: { manifest: true },
  base: process.env.mode === "production" ? "/static/" : "/",
  root: "./src",
  plugins: [reactRefresh()],
 });
	{% 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/main.jsx"></script>
	{% else %}
	{% render_vite_bundle %}
	{% endif %}
	</body>

	</html>
	# 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}"""
	)
	# 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 / "src"

	# 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",
	]
	STATIC_ROOT = BASE_DIR / "staticfiles"
	import { defineConfig } from "vite";
	import reactRefresh from "@vitejs/plugin-react-refresh";

	// https://vitejs.dev/config/
	export default defineConfig({
	build: { manifest: true },
	base: process.env.mode === "production" ? "/static/" : "/",
	root: "./src",
	plugins: [reactRefresh()],
	});