Zmagasz się z wyborem idealnego stosu technologicznego dla swojego nowego projektu? Chcesz połączyć solidność i bezpieczeństwo Django z niezwykłą szybkością i prostotą Svelte, ale nie wiesz, od czego zacząć? Brak klarownych, aktualnych poradników prowadzi do frustracji, błędów konfiguracyjnych i straty cennych godzin. Ten artykuł to kompleksowe rozwiązanie. Przeprowadzimy Cię krok po kroku przez cały proces – od wyboru architektury, przez konfigurację API, aż po bezpieczną autentykację użytkowników. To jedyny tutorial na temat integracji Django i Svelte, jakiego będziesz potrzebować w 2025 roku.

Dlaczego połączenie Django i Svelte to duet idealny w 2025 roku?

W świecie tworzenia nowoczesnych aplikacji internetowych, synergia między backendem a frontendem jest kluczowa. Django, ze swoją filozofią „batteries-included”, oferuje niezrównane bezpieczeństwo, skalowalność i szybkość tworzenia logiki biznesowej. Z kolei Svelte, kompilator zamieniający kod w czysty, zoptymalizowany JavaScript, gwarantuje błyskawiczne działanie interfejsu i fantastyczne doświadczenia użytkownika (UX). Połączenie ich mocy to przepis na sukces:

• Maksymalna wydajność: Django sprawnie obsługuje zapytania do bazy danych i logikę, podczas gdy Svelte renderuje interfejs po stronie klienta bez narzutu wirtualnego DOM, co czyni go jednym z najlepszych frameworków frontendowych.
• Czysty podział obowiązków (Separation of Concerns): Backend (Django) dostarcza dane przez API, a frontend (Svelte) jest odpowiedzialny wyłącznie za ich prezentację. To ułatwia rozwój, testowanie i utrzymanie aplikacji.
• Skalowalność: Taka architektura pozwala na niezależne skalowanie części backendowej i frontendowej, co jest kluczowe w rosnących projektach. Możesz obsługiwać miliony użytkowników bez przebudowy całego systemu.

Architektura aplikacji: Monolit z Django czy oddzielne serwisy?

Zanim napiszesz pierwszą linię kodu, musisz podjąć kluczową decyzję architektoniczną. Wybór zależy od specyfiki Twojego projektu, zespołu i planów na przyszłość. Oto porównanie dwóch głównych podejść:

W tym tutorialu skupimy się na podejściu Oddzielnych Serwisów, ponieważ jest bardziej elastyczne i zgodne z nowoczesnymi praktykami tworzenia oprogramowania. Jest to fundament, który oferujemy w profesjonalnym projektowaniu stron.

Krok po Kroku: Konfiguracja Projektu Django + SvelteKit z Vite

Przejdźmy do praktyki. Oto jak postawić fundamenty pod naszą aplikację.

1. Krok 1: Stworzenie środowiska i instalacja Django
   Zacznij od utworzenia wirtualnego środowiska dla Pythona, co jest najlepszą praktyką.

   python -m venv venv
   source venv/bin/activate  # Na Windows: venv\Scripts\activate
   pip install django djangorestframework django-cors-headers

   Następnie utwórz projekt i aplikację Django.

   django-admin startproject backend
   cd backend
   python manage.py startapp api

2. Krok 2: Podstawowa konfiguracja Django
   W pliku backend/settings.py dodaj zainstalowane aplikacje do INSTALLED_APPS:

   INSTALLED_APPS = [
   # ...
   'rest_framework',
   'corsheaders',
   'api',
   ]

   Dodaj także corsheaders.middleware.CorsMiddleware do MIDDLEWARE (najlepiej na początku listy). Na potrzeby deweloperskie, zezwól na wszystkie źródła w settings.py:

   CORS_ALLOW_ALL_ORIGINS = True

   Uwaga: Na produkcji powinieneś użyć CORS_ALLOWED_ORIGINS i podać dokładny adres swojej aplikacji frontendowej.
3. Krok 3: Inicjalizacja projektu SvelteKit
   W głównym katalogu projektu (poza folderem backend) uruchom kreator SvelteKit:

   npm create svelte@latest frontend

   Wybierz opcje: „Skeleton project”, „TypeScript” (zalecane), „ESLint”, „Prettier”. Następnie zainstaluj zależności i bibliotekę axios do komunikacji z API.

   cd frontend
   npm install
   npm install axios

Mamy teraz dwa oddzielne, ale gotowe do współpracy projekty: backend Django i frontend SvelteKit.

Tworzenie Potężnego API z Django REST Framework

Django REST Framework (DRF) to złoty standard tworzenia API w Django. Zobaczmy, jak stworzyć prosty endpoint, który będzie dostarczał dane do Svelte.

1. Model: W api/models.py stwórzmy prosty model, np. Note.

from django.db import models

class Note(models.Model):
title = models.CharField(max_length=200)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)

def __str__(self):
    return self.title

2. Serializer: W nowym pliku api/serializers.py definiujemy, jak model ma być konwertowany do formatu JSON.

from rest_framework import serializers
from .models import Note

class NoteSerializer(serializers.ModelSerializer):
class Meta:
model = Note
fields = ['id', 'title', 'content', 'created_at']

3. Widok (View): W api/views.py tworzymy logikę, która obsługuje zapytania HTTP.

from rest_framework import viewsets
from .models import Note
from .serializers import NoteSerializer

class NoteViewSet(viewsets.ModelViewSet):
queryset = Note.objects.all()
serializer_class = NoteSerializer

4. URL: W backend/urls.py i nowym pliku api/urls.py konfigurujemy routing.

# api/urls.py
from rest_framework.routers import DefaultRouter
from .views import NoteViewSet

router = DefaultRouter()
router.register(r'notes', NoteViewSet, basename='note')
urlpatterns = router.urls

backend/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')),
]

Po wykonaniu migracji (python manage.py makemigrations i migrate) i uruchomieniu serwera (python manage.py runserver), pod adresem http://127.0.0.1:8000/api/notes/ będziesz miał działający endpoint API. Cały ten proces jest częścią tego, jak podchodzimy do naszego procesu projektowego.

Integracja Frontendu Svelte z Backendem Django

Teraz, gdy nasze API działa, czas skonsumować je w aplikacji Svelte. W katalogu frontend/src/routes utwórz plik +page.svelte.

<script>
import { onMount } from 'svelte';
import axios from 'axios';

let notes = [];
let error = null;

onMount(async () => {
try {
const response = await axios.get('http://127.0.0.1:8000/api/notes/');
notes = response.data;
} catch (err) {
error = "Nie udało się pobrać notatek. Upewnij się, że serwer Django działa.";
console.error(err);
}
});


Moje Notatki

{#if error}
{error}
{/if}

{#await notes}
Ładowanie notatek...
{:then notes}

{#each notes as note}

{note.title}: {note.content}

{/each}

{:catch error}
Wystąpił błąd: {error.message}
{/await}

Po uruchomieniu serwera deweloperskiego Svelte (npm run dev), Twoja aplikacja frontendowa pobierze i wyświetli dane z API Django. To fundament komunikacji, na którym budowane są skomplikowane systemy.

Case Study: Jak zintegrowaliśmy Django i Svelte dla klienta z branży FinTech

Bezpieczeństwo przede wszystkim: Autentykacja JWT w Django i Svelte

W realnej aplikacji potrzebujesz systemu logowania. Najpopularniejszym standardem w architekturze API jest JSON Web Tokens (JWT). Użyjemy do tego biblioteki djangorestframework-simplejwt.

Konfiguracja w Django:

1. Zainstaluj bibliotekę: pip install djangorestframework-simplejwt
2. Dodaj 'rest_framework_simplejwt' do INSTALLED_APPS.
3. W backend/settings.py skonfiguruj DRF do używania JWT:

   REST_FRAMEWORK = {
   'DEFAULT_AUTHENTICATION_CLASSES': (
   'rest_framework_simplejwt.authentication.JWTAuthentication',
   )
   }

4. Dodaj endpointy do logowania i odświeżania tokenu w backend/urls.py:

   from rest_framework_simplejwt.views import (
   TokenObtainPairView,
   TokenRefreshView,
   )
   
   urlpatterns = [
   # ...
   path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
   path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
   ]

Implementacja w Svelte:

Po stronie Svelte, musisz stworzyć formularz logowania, który wyśle zapytanie POST na endpoint /api/token/ z loginem i hasłem. W odpowiedzi otrzymasz access_token i refresh_token. Access_token musisz dołączać do nagłówka Authorization każdego kolejnego zapytania do chronionych endpointów (np. Authorization: Bearer <token>). Refresh_token przechowuj bezpiecznie (np. w httpOnly cookie) i używaj go do uzyskania nowego access_token, gdy stary wygaśnie.

Najczęściej Zadawane Pytania (FAQ)