Install the following python package via pip
pip install inertia-djangoAdd the Inertia app to your INSTALLED_APPS in settings.py
INSTALLED_APPS = [
# django apps,
'inertia',
# your project's apps,
]Add the Inertia middleware to your MIDDLEWARE in settings.py
MIDDLEWARE = [
# django middleware,
'inertia.middleware.InertiaMiddleware',
# your project's 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.
Now you're all set!
Django specific frontend docs coming soon. For now, we recommend installing django_vite
and following the commits on the Django Vite example repo. Once Vite is setup with
your frontend of choice, just replace the contents of entry.js with this file (example in react)
You can also check out the official Inertia docs at https://inertiajs.com/.
Django's CSRF tokens are tightly coupled with rendering templates so Inertia Django automatically handles adding the CSRF cookie for you to each Inertia response. Because the default names Django users for the CSRF headers don't match Axios (the Javascript request library Inertia uses), we'll need to either modify Axios's defaults OR Django's settings.
You only need to choose one of the following options, just pick whichever makes the most sense to you!
In your entry.js file
axios.defaults.xsrfHeaderName = "X-CSRFToken"
axios.defaults.xsrfCookieName = "csrftoken"OR
In your Django settings.py file
CSRF_HEADER_NAME = 'HTTP_X_XSRF_TOKEN'
CSRF_COOKIE_NAME = 'XSRF-TOKEN'Render Inertia responses is simple, you can either use the provided inertia render function or, for the most common use case, the inertia decorator. The render function accepts four arguments, the first is your request object. The second is the name of the component you want to render from within your pages directory (without extension). The third argument is a dict of props that should be provided to your components. The final argument is template_data, for any variables you want to provide to your template, but this is much less common.
from inertia import render
from .models import Event
def index(request):
return render(request, 'Event/Index', props={
'events': Event.objects.all()
})Or use the simpler decorator for the most common use cases
from inertia import inertia
from .models import Event
@inertia('Event/Index')
def index(request):
return {
'events': Event.objects.all(),
}If you have data that you want to be provided as a prop to every component (a common use-case is information about the authenticated user) you can use the share method. A common place to put this would be in some custom middleware.
from inertia import share
from django.conf import settings
from .models import User
def inertia_share(get_response):
def middleware(request):
share(request,
app_name=settings.APP_NAME,
user_count=lambda: User.objects.count(), # evaluated lazily at render time
user=lambda: request.user, # evaluated lazily at render time
)
return get_response(request)
return middlewareIt is possible to redirect to an external website, or even another non-Inertia endpoint in your app while handling an Inertia request.
This can be accomplished using a server-side initiated window.location visit via the location method:
from inertia import location
def external():
return location("http://foobar.com/")It will generate a 409 Conflict response and include the destination URL in the X-Inertia-Location header.
When this response is received client-side, Inertia will automatically perform a window.location = url visit.
On the front end, Inertia supports the concept of "partial reloads" where only the props requested
are returned by the server. Sometimes, you may want to use this flow to avoid processing a particularly slow prop on the intial load. In this case, you can use Lazy props. Lazy props aren't evaluated unless they're specifically requested by name in a partial reload.
from inertia import lazy, inertia
@inertia('ExampleComponent')
def example(request):
return {
'name': lambda: 'Brandon', # this will be rendered on the first load as usual
'data': lazy(lambda: some_long_calculation()), # this will only be run when specifically requested by partial props and WILL NOT be included on the initial load
}Inertia Django ships with a custom JsonEncoder at inertia.utils.InertiaJsonEncoder that extends Django's
DjangoJSONEncoder with additional logic to handle encoding models and Querysets. If you have other json
encoding logic you'd prefer, you can set a new JsonEncoder via the settings.
Enable SSR via the INERTIA_SSR_URL and INERTIA_SSR_ENABLED settings
Coming Soon!
Inertia Django has a few different settings options that can be set from within your project's settings.py file. Some of them have defaults.
The default config is shown below
INERTIA_VERSION = '1.0' # defaults to '1.0'
INERTIA_LAYOUT = 'layout.html' # required and has no default
INERTIA_JSON_ENCODER = CustomJsonEncoder # defaults to inertia.utils.InertiaJsonEncoder
INERTIA_SSR_URL = 'http://localhost:13714' # defaults to http://localhost:13714
INERTIA_SSR_ENABLED = False # defaults to FalseInertia Django ships with a custom TestCase to give you some nice helper methods and assertions.
To use it, just make sure your TestCase inherits from InertiaTestCase. InertiaTestCase inherits from Django's django.test.TestCase so it includes transaction support and a client.
from inertia.test import InertiaTestCase
class ExampleTestCase(InertiaTestCase):
def test_show_assertions(self):
self.client.get('/events/')
# check the component
self.assertComponentUsed('Event/Index')
# access the component name
self.assertEqual(self.component(), 'Event/Index')
# props (including shared props)
self.assertHasExactProps({name: 'Brandon', sport: 'hockey'})
self.assertIncludesProps({sport: 'hockey'})
# access props
self.assertEquals(self.props()['name'], 'Brandon')
# template data
self.assertHasExactTemplateData({name: 'Brian', sport: 'basketball'})
self.assertIncludesTemplateData({sport: 'basketball'})
# access template data
self.assertEquals(self.template_data()['name'], 'Brian')The inertia test helper also includes a special inertia client that pre-sets the inertia headers
for you to simulate an inertia response. You can access and use it just like the normal client with commands like self.inertia.get('/events/'). When using the inertia client, inertia custom assertions are not enabled though, so only use it if you want to directly assert against the json response.
- Django Svelte Template - A Django template and example project demonstrating Inertia with Svelte and SSR.
A huge thank you to the community members who have worked on InertiaJS for Django before us. Parts of this repo were particularly inspired by Andres Vargas and Samuel Girardin. Additional thanks to Andres for the Pypi project.
Maintained and sponsored by the team at bellaWatt
