django-vite-svelte Svelte Themes

Django Vite Svelte

An example of Svelte integration inside Django using ViteJS (no REST used)

Django + Svelte

Starter pack for a Svelte app being loaded through a Django backend, using django-vite.

Inspired by rupert-br's blogpost: https://www.rbd-solutions.com/blog/svelte-django/

Get started locally

To develop, you need to open two terminals and do the following:

  1. Launch the backend with UV
uv run python manage.py runserver
  1. Go to frontend_app and launch the dev server. I used pnpm for the app's creation.
pnpm dev

As an option, you can build the frontend using pnpm build. it will spawn a dist folder at static/assets, where the manifest.json file lies. If you're planning to make the frontend available for production, don't forget to use the following command:

uv run python manage.py collectstatic

This will put all your static files inside the STATIC_ROOT parameter in config/settings.py.

Resources used

The ressources listed below can be useful if you're planning to use ViteJS as an alternative to Webpack or Gulp. If you want to test the same configuration with another JS framework, you can use these ressources, as long as you keep Django and ViteJS's settings coherent.

Happy hacking!

Top categories

Loading Svelte Themes