I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.

Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.

My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!

I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.

Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.

My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!

• javascript
• django
• svelte
• sveltekit
• web-development-server

• 1 If you use a vanilla svelte app instead of sveltekit, it's probably possible to set up a flow where your Django API will try to route and handle the request, and for anything it doesn't understand it will serve the svelte app instead of a 400 code. From there the svelte app will try to handle the request, and if it doesn't understand, render a 404 page. I haven't seen this done though so you would have to research how on your own. I've only seen this pattern with a .NET and React combo. – Nik FP Commented Jun 10, 2022 at 18:40

4 Answers 4

First, understand the difference between Svelte and SvelteKit. SvelteKit is a front-end + server solution that is a layer above vanilla Svelte. SvelteKit adds things like routing and support for sever(less) functions.

If you want to use Django for all your server-side processing, you should just use (vanilla) Svelte to write independent web components that you call from html served by Django. No need to use SvelteKit if you aren't using any of the extra framework features.

• How to write a web component with vanilla Svelte
• How to write a web component with SvelteKit.

If you want to just write your API's in Django and do everything else from SvelteKit, I would run both Django and SvelteKit servers from different subdomains and/or ports. Like django.example.com and kit.example.com or example.com:8000 and example.com:3000.

SvelteKit also provides a low-level handle() hook that can bypass SvelteKit, but usually JS/node.js is still used. I think it would be tricky to pass a request from SvelteKit to Django.

I made a simple template for svelte and django. please check this link: https://github.com/Pei2tech/svelte4django. What you need to add routing to support svelte instead of using sveltekit.

I find myself having the same question, it's not perfect but I got it to work with the following:

• Create a directory that will contain everything, e.g. my-project

• Inside the directory create your Django project, e.g. django-svelte, with django-admin startproject django-svelte

• From my-project/django-svelte create an app to contain the svelte app, e.g. frontend, with python manage.py startapp frontend

• Inside frontend create two subdirectories templates and static; inside each of them create a frontend directory. (You should have frontend/templates/frontend and frontend/static/frontend in the end)

• Inside my-project initialize a svelte-kit project, e.g. client, with npm init svelte client

• Inside client install all packages and add @sveltejs/adapter-static with npm install and npm i -D @sveltejs/adapter-static

• Replace the content of svelte.config.js with:

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app 
        adapter: adapter({
            pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
            assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
            fallback: null,
            precompress: false
        }),

        prerender: {
            // This can be false if you're using a fallback (i.e. SPA mode)
            default: true
        }
    }
};

This will write your HTML, JS and CSS files inside the frontend app.

• Create a build with npm run build

• Collect static files in Django with python manage.py collectstatic

• Run Django with python manage.py runserver or other servers

I'm sure there are simpler ways though :-)

I have been using this Django SvelteKit template as it's based on svelte5 with django; has auth (register, login, forgot/reset password), forms-actions, mailing, toast/flash messages, validations and other essential features. It apply some awesome magic to bind django backend with sveltekit forms-actions, you do not have to write extra fetch calls, it just works.

Also, the fetch call gets super easy as it provides an $api/ alias to do that.