How to build a modern Svelte apps using Routify and Django

readme.md

Guide

Svelte is a frontend framework for JavaScript that makes it easy to build web apps with ease.

Routify is a framework that adds support for SSR (Server-Side Rendering) to a Svelte project.

Django is a framework for the Python language, allowing the construction of full-stack apps.

I was working on a project that ran on Django, and up until now, I used static files to build my pages and vanilla JavaScript to animate elements on my page.

The issue I encountered was that the Django server had to process/generate the complete HTML code of my page before displaying it, sometimes causing the page to take longer to load.

In the end, I started some research to find a way to streamline my workflow. An API was built on the Django database to be used by other services throughout the project.

The API was set up. Now, to consume it, there was no possibility of running an infrastructure on Netlify/Vercel because the project had to use files internal to the enterprise.

Ultimately, I discovered Inertia.js who was used most to run ReactJS into server app ( Laravel/Django/Ruby ) without the need to run it as separate frontend.

In the background, it was django_vite who were doing most of the work.

My focus was on how to build a spa/ssr app to consume the API more easily.

So, the first step was to install django_vite and then configure it. I'll share my vite.config.js used to run Svelte.

You can find below the configuration used in routify, django to make everything works great.

Make sure to install Routify and in django enable a wildcard path so any request coming from your spa/ssr app is not detected as 404 page.

Follow this post : https://stackoverflow.com/questions/64883415/django-catching-all-urls-under-a-specific-name

After configuring it properly, make sure to run Vite in another window during development so that the files can be properly seen by the Django server.

Once you are ready for production, run the following commands in this order:

npm run build

python manage.py collectstatic 

package.json

{
  "name": "x456",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@inertiajs/inertia": "^0.11.1",
    "@inertiajs/inertia-svelte": "^0.8.0",
    "@inertiajs/progress": "^0.2.7",
    "@sveltejs/vite-plugin-svelte": "^2.0.0",
    "svelte": "^4.2.12",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "@roxi/routify": "^3.0.0-next.217"
  }
}

settings.py

if DEBUG:
    DJANGO_VITE_DEV_MODE = True
else:
    DJANGO_VITE = {
        "default" : {
            "manifest_path" : BASE_DIR / "static_generated" / "dist" / "manifest.json" # specify the path to manifest.json
        }
    }

INSTALLED_APPS += [ 'django_vite' ] # add django_vite to existing installed apps.


DJANGO_VITE_ASSETS_PATH = BASE_DIR / "core"
STATICFILES_DIRS = [
    DJANGO_VITE_ASSETS_PATH, 
    BASE_DIR / "static" / "dist", # add the path used as outdir here
    BASE_DIR / "static",
]

vite.config.js

import {resolve} from 'path';
import {svelte} from '@sveltejs/vite-plugin-svelte'
import {defineConfig} from "vite";
import routify from '@roxi/routify/vite-plugin'
let static_url = "/static/dist";
 if ( process.env.NODE_ENV == "development" ) {
    static_url = "/static/"
}


export default defineConfig({
    plugins: [
        svelte(),
        routify({
            routifyDir : "./core/.routify", //change the default routify dir path
            routesDir : "./core/src/pages", //change the default routify routes
            rootComponent:"./core/src/App.svelte", //load the custom app.svelte
            clearRoutifyDir:true,
            mainEntryPoint:"./core/src/main.js", // routify entry point
            render : {
                ssr : true,
            }
        })
    ],
    root: resolve('./core'),
    base: static_url,
    server: {
        host: 'localhost',
        port: 5173,
        open: false,
        watch: {
            usePolling: true,
            disableGlobbing: false,
        },
    },
    resolve: {
        extensions: ['.js', '.json', '.svelte', '.ts', '.tsx', '.jsx'],
    },
    build: {
        outDir: resolve('./static/dist'),
        assetsDir: '',
        manifest: true,
        emptyOutDir: true,
        rollupOptions: {
            input: {
                main: resolve('./core/src/main.js'),
            },
            output: {
                chunkFileNames: undefined,
            },
        },
    },
});