Hazho Human hazho

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.

Here's a boilerplate that uses this approach: https://github.com/labcodes/django-react-boilerplate

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;
static files unrelated to your app, like images or fonts, should be served by django, instead of imported directly inside your frontend app;

Restricting some fields in a model

We would like to be able to add images to events - or tag them with display locations such as "Home Page". But we do not want oridinary Event Planners to be able to do either of those things. Wagtail's admin interface is defined at the class level, so omitting those fields for just a subset of users would be hard to do in the panel definition. Instead we hide those fields during panel instantiation.

First, in the EventPage model, we create a MultiFieldPanel with a specific CSS class name:

	<!DOCTYPE html>
	{% load wagtailadmin_tags i18n navigation_tags site_tags wagtailcore_tags %}
	{% wagtail_site as current_site %}
	{% get_current_language as LANGUAGE_CODE %}
	{% get_current_language_bidi as LANGUAGE_BIDI %}
	<html class="no-js" lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
	<head>
	<!-- option1 -->
	<!-- if you like the language control all UI Use this -->
	<style>

	# Nginx+Unicorn best-practices congifuration guide. Heartbleed fixed.
	# We use latest stable nginx with fresh openssl, zlib and pcre dependencies.
	# Some extra handy modules to use: --with-http_stub_status_module --with-http_gzip_static_module
	#
	# Deployment structure
	#
	# SERVER:
	# /etc/init.d/nginx (1. nginx)
	# /home/app/public_html/app_production/current (Capistrano directory)
	#

	{# file path: <PROJECT_DIRE>\public_templates\wagtailadmin\shared\pagination_nav.html #}
	{% load i18n %}
	{% load wagtailadmin_tags %}

	{% if linkurl %}
	{% url linkurl as url_to_use %}
	{% endif %}

	{% comment %} from here Changed by Developer#3 {% endcomment %}
	{% if items.has_previous or items.has_next %}

	"""
	An example of minimum requirements to make MultiValueField-MultiWidget for Django forms.
	"""
	import pickle

	from django.http import HttpResponse
	from django import forms
	from django.template import Context, Template
	from django.views.decorators.csrf import csrf_exempt

	from wagtail.core import blocks

	class Heading(blocks.StructBlock):
	text = blocks.CharBlock()
	level = blocks.IntegerBlock()

	class Meta:
	template = 'blocks/heading_block.html'

	from django import template
	from django.utils.safestring import mark_safe


	register = template.Library()

	@register.filter(needs_autoescape=True)
	def replace(value, arg, autoescape=True):
	if arg == "[but]": result = value.replace(arg, "<button style='font-size:1.5rem; padding: .5rem; margin: .25rem; text-align: center; box-shadow: 0 0 .5rem blue;'>")
	if arg == "[s.5]": result = value.replace(arg, "<span style='font-size: .5rem !important;'>")

	from django import template
	from wagtail.images.models import Image
	from django.utils.safestring import mark_safe


	register = template.Library()


	@register.filter(needs_autoescape=True)
	def replace(value, arg, autoescape=True):