Installation Instructions

DxSvelte is not currently recommended for use in production; it's still early days.

Before anything else, initialise your Django project with DxSvelte and then install missing dependencies to start building your brand new SPA. You will only need to do this once per project.

npx dxsvelte
npm i

You should now have a directory tree resembling the following:

my_project_name
├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── my_project_name
│   └── ...
├── static
│   ├── index.html
│   ├── ...
└── ...

Adding Svelte Views

At this point, you can start building out your individual Django apps. To 'tag' them so that they are rolled up into the SPA, you need to assign names to your paths and prefix them with '$', like so:

# Example app called 'home_page'
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='$index'),
    path('about', views.about, name='$about'),
]

Then, within the corresponding views.py, create the handlers. CSRF has not yet been implemented, so you will need to use exemption decorators. Never do this in production. Example:

from dxsvelte import render

def index(req):
    # Your normal view logic goes here
    return render(req, data?)

def about(req):
    return render(req)

Create your .svelte view components, and optionally within your main app folder create your own layout.svelte file:

my_project_name
├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── home_page
│   ├── ...
│   └── views
│       ├── index.svelte
│       └── about.svelte
├── my_project_name
│   └── layout.svelte
└── ...

Refer to the Svelte documentation if you're not especially familiar with it or get stuck.

If you do write your own layout.svelte component (recommended), ensure that you leave the 'slot/' element in there somewhere - that's what gets replaced with your page contents. For now, more advanced layouts are not supported.

<h1>Your Website Name.</h1>
<slot/>

Finally, build it.

npm run compile

That's it! Now you can start building your Svelte-powered hybrid SSR SPA, all while using Django as your back-end.