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
Find the configuration files ( vite.config.js|settings.py ) here : https://gist.github.com/manutheblacker/b58f13d12476f0dae742be2a2a50e019
Top comments (0)