# 🚀 Запуск EUSRR Frontend + Backend ## ✅ Что уже сделано - ✅ React frontend с Refine.dev создан - ✅ Подключение к Django REST API настроено - ✅ JWT авторизация реализована - ✅ Создана страница списка сотрудников - ✅ Настроены ресурсы для всех модулей ## 📋 Следующие шаги ### 1. Установить CORS на Django Backend ```bash cd backend .venv/Scripts/pip install django-cors-headers ``` ### 1.5. Проверить что Daphne установлен ```bash cd backend .venv/Scripts/pip show daphne ``` Если Daphne не установлен: ```bash .venv/Scripts/pip install daphne ``` Добавить в `backend/eusrr_backend/settings.py`: ```python INSTALLED_APPS = [ "daphne", "channels", "corsheaders", # ← ДОБАВИТЬ # ...остальное... ] MIDDLEWARE = [ "django.middleware.security.SecurityMiddleware", "corsheaders.middleware.CorsMiddleware", # ← ДОБАВИТЬ ВТОРЫМ! # ...остальное... ] # В конец файла: CORS_ALLOWED_ORIGINS = [ "http://localhost:5173", "http://127.0.0.1:5173", ] CORS_ALLOW_CREDENTIALS = True ``` **Полная инструкция:** [docs/guides/DJANGO_CORS_SETUP.md](../../docs/guides/DJANGO_CORS_SETUP.md) ### 2. Установить зависимости frontend ```bash cd frontend npm install ``` ### 3. Запустить оба сервера **⚠️ ВАЖНО: Для WebSocket используйте Daphne вместо стандартного Django сервера!** **Terminal 1 - Django (с WebSocket на Daphne):** ```bash cd backend .venv/Scripts/daphne -b 0.0.0.0 -p 9000 eusrr_backend.asgi:application ``` Или используйте `runserver` для HTTP (без WebSocket): ```bash cd backend .venv/Scripts/python manage.py runserver 8000 ``` **Terminal 2 - React:** ```bash cd frontend npm run dev ``` ### 4. Открыть приложение Откройте в браузере: **http://localhost:5173** ## 🔍 Проверка WebSocket подключения 1. Откройте **DevTools** (F12) → **Console** 2. Ищите сообщение `🔄 Подключение к WebSocket: ws://localhost:9000/ws/...` 3. Если ошибка `❌ WebSocket error: {}`, проверьте: - ✅ Backend запущен через Daphne (не через runserver) - ✅ PORT 9000 доступен (не занят другой программой) - ✅ JWT токен сохранен в localStorage - ✅ В файле `.env.local` стоит `NEXT_PUBLIC_WS_URL=ws://localhost:9000` ## 🔐 Тестовая авторизация Используйте существующего пользователя из вашей БД: ``` Email: ваш_email@example.com Password: ваш_пароль ``` После входа токен автоматически сохранится в `localStorage` и будет использован для WebSocket аутентификации. ## 📁 Структура страниц Сейчас доступно: - ✅ `/employees` - Список сотрудников (работает!) - ⏳ `/departments` - TODO - ⏳ `/documents` - TODO - ⏳ `/requests` - TODO - ⏳ `/events` - TODO - ⏳ `/feed` - TODO - ⏳ `/chats` - TODO ## 🛠️ Разработка ### Создание новой страницы Например, для документов: ```bash mkdir -p src/pages/documents touch src/pages/documents/{list,create,edit,show}.tsx touch src/pages/documents/index.ts ``` ### Добавление маршрута В `src/App.tsx` добавить: ```typescript } /> } /> } /> } /> ``` ## 🐛 Проблемы? ### CORS ошибки - Проверьте что `django-cors-headers` установлен - Убедитесь что middleware добавлен правильно - Перезапустите Django сервер ### 401 Unauthorized - Проверьте что пользователь существует в БД - Проверьте endpoint: `http://localhost:8000/api/auth/token/` ### WebSocket error: {} **Это самая частая ошибка!** Решение: 1. **Проверьте что backend запущен через Daphne:** ```bash cd backend .venv/Scripts/daphne -b 0.0.0.0 -p 9000 eusrr_backend.asgi:application ``` 2. **НЕ используйте `python manage.py runserver`** - это не поддерживает WebSocket! 3. **Убедитесь что .env.local имеет правильный URL:** ```dotenv NEXT_PUBLIC_WS_URL=ws://localhost:9000 NEXT_PUBLIC_BACKEND_URL=http://localhost:9000 ``` 4. **Проверьте в DevTools → Network → WS:** - Введите фильтр `ws` чтобы найти WebSocket подключение - Если соединение **101 Switching Protocols** - всё работает ✅ - Если ошибка **Failed** - backend не запущен через Daphne ❌ 5. **Проверьте порт 9000:** ```bash # Windows - проверить какой процесс занимает порт netstat -ano | findstr :9000 # Если занято - убейте процесс или используйте другой порт ``` ### Страница не загружается - Убедитесь что оба сервера запущены - Проверьте `.env.local` файл в frontend - Откройте DevTools → Network и посмотрите статусы запросов ## 📚 Документация - Frontend README: [frontend/README.md](README.md) - Django CORS: [docs/guides/DJANGO_CORS_SETUP.md](../../docs/guides/DJANGO_CORS_SETUP.md) - **API v2 Migration**: [docs/guides/API_V2_MIGRATION.md](../../docs/guides/API_V2_MIGRATION.md) - Refine Docs: https://refine.dev/docs/ ## 🎯 Следующие задачи 1. Создать endpoint `/api/v2/employees/me/` для получения текущего пользователя 2. Добавить страницы для остальных модулей (documents, requests, etc.) 3. Добавить UI библиотеку (Ant Design / Material-UI) 4. Интегрировать WebSocket для чата 5. Добавить тесты --- **Готово! Теперь можно разрабатывать! 🚀**