Как мне создать веб-приложение Django + SvelteKit?

Я уже получил свою долю Bootstrap и Django, но никогда не пробовал другие frontend фреймворки, такие как Angular, React и т.д., и наконец захотел попробовать SvelteKit. Так что я действительно неопытен и новичок в таких вещах.

В настоящее время я уже создал свой проект Django, а также проект SvelteKit, следуя руководству на их сайте.

Моя проблема в том, что я запутался в том, как теперь объединить Django и SvelteKit. Я просто запускаю оба сервера одновременно на разных портах и получаю данные из Django JSON API в мой Svelte frontend или есть какой-то подход к этому? Я подумал, что, возможно, есть способ заставить мое приложение Django рендерить файлы Svelte с сервера Svelte для меня. Я просто чувствую себя очень потерянным в данный момент, так что если кто-нибудь может помочь мне или у кого-нибудь есть ресурсы, которые я мог бы прочитать, чтобы лучше ознакомиться с этой темой, поскольку я не нашел многого в Интернете, это было бы здорово!

Заранее большое спасибо!

Сначала поймите разницу между Svelte и SvelteKit. SvelteKit - это front-end + серверное решение, которое является уровнем выше ванильного Svelte. SvelteKit добавляет такие вещи, как маршрутизация и поддержка функций sever(less).

Если вы хотите использовать Django для всей обработки на стороне сервера, вам следует просто использовать (ванильный) Svelte для написания независимых веб-компонентов, которые вы вызываете из html, обслуживаемого Django. Нет необходимости использовать SvelteKit, если вы не используете никаких дополнительных возможностей фреймворка.

Если вы хотите просто писать свои API на Django и делать все остальное из SvelteKit, я бы запустил серверы Django и SvelteKit с разных поддоменов и/или портов. Например, django.example.com и kit.example.com или example.com:8000 и example.com:3000.

SvelteKit также предоставляет низкоуровневый handle() хук, который может обойти SvelteKit, но обычно все равно используется JS/node.js. Я думаю, что будет сложно передать запрос из SvelteKit в Django.

У меня такой же вопрос, он не идеален, но я заставил его работать со следующим:

  • Создайте каталог, в котором будет содержаться все, например my-project

    .

  • Внутри директории создайте свой проект Django, например django-svelte, с django-admin startproject django-svelte

  • Из my-project/django-svelte создайте приложение, содержащее приложение svelte, например frontend, с помощью python manage.py startapp frontend

    .

  • Внутри frontend создайте два подкаталога templates и static; внутри каждого из них создайте каталог frontend. (В конце у вас должно быть frontend/templates/frontend и frontend/static/frontend)

    .

  • Внутри my-project инициализируйте проект svelte-kit, например client, с помощью npm init svelte client

  • Внутри client установите все пакеты и добавьте @sveltejs/adapter-static с npm install и npm i -D @sveltejs/adapter-static

  • Замените содержимое svelte.config.js на:

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
        }
    }
};

Это позволит написать ваши HTML, JS и CSS файлы внутри frontend приложения.

  • Создайте сборку с помощью npm run build

  • Соберите статические файлы в Django с помощью python manage.py collectstatic

  • Запускайте Django с python manage.py runserver или другими серверами

Я уверен, что есть более простые способы :-)

Я сделал простой шаблон для svelte и django. пожалуйста, проверьте эту ссылку: https://github.com/Pei2tech/svelte4django. Что вам нужно добавить для поддержки svelte вместо использования sveltekit.

Вернуться на верх