Перейти до змісту

React 19 SPA Фронтенд

Фронтенд-частина платформи побудована як швидкий, реактивний Single Page Application (SPA) на базі найновішої версії React 19.

🛠️ Стек технологій клієнта

  • Фреймворк: React 19 + TypeScript.
  • Складальник: Vite 6.
  • Стилізація: власний CSS у src/index.css.
  • Іконки: Lucide React.
  • Реверс-проксі: інтегрований у vite.config.ts для усунення проблем з CORS під час локальної розробки.

Варіанти стартового макета

Генератор school-admin пропонує три макети для нового сайту. Усі мають головну сторінку, окремі компоненти розділів, адаптивне меню й засоби доступності. Дані школи та навігація надходять з /api/v1/core/manifest/.

Макет Вигляд Коли обирати
classic Темно-синя шапка, світла горизонтальна навігація й стриманий вступний блок Для формального сайту школи; це значення за замовчуванням
editorial Газетний великий заголовок, теплий паперовий фон і колонки матеріалів Для сайту з акцентом на документах і новинах
portal Зелена бічна навігація, великий вступний блок і плитки розділів Для швидкого доступу до розділів школи

Виберіть варіант під час створення Django-проєкту:

school-admin startproject my_school --frontend-template editorial
cd my_school/frontend
npm install
npm run dev

Якщо Django-проєкт уже існує, створіть фронтенд окремо з його кореневої теки:

school-admin create-frontend --template portal --output-dir frontend

У цьому разі classic можна отримати без --template. Макет задається під час генерації та надалі редагується у frontend/src/index.css і frontend/src/App.tsx; дані закладу залишаються в API. Для прапорців вибору макета потрібна версія django-school-framework 0.2.7 або новіша.

У новому сайті є головна сторінка зі швидкими переходами, реєстр документів, фінансова таблиця, вступ, розклад, харчування, безпека зі зверненням, новини та фотогалерея. На вузьких екранах навігація відкривається окремим меню; кнопки доступності змінюють розмір тексту і контрастність.

🔄 Інтеграція з бекендом через Vite Proxy

Фронтенд автоматично проксує всі запити до API та адмінки на порт бекенду:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const backendUrl = process.env.VITE_BACKEND_URL || 'http://127.0.0.1:8000';

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
    proxy: {
      '/api': { target: backendUrl, changeOrigin: true },
      '/admin': { target: backendUrl, changeOrigin: true },
      '/static': { target: backendUrl, changeOrigin: true },
      '/media': { target: backendUrl, changeOrigin: true },
    },
  },
});

Це дозволяє відкривати посилання /admin/ або завантажувати медіа-файли /media/... прямо через адресу сайту без жодних конфліктів доменів чи портів.

📦 Складання для продакшн

Для генерації оптимізованого статичного бандлу:

npm run build

Згенеровані файли у теці dist/ містять HTML, CSS та JavaScript. Їх можна роздавати через Nginx; API та Django Admin мають бути доступні за відповідними маршрутами.