Corp/frontend/QUICKSTART.md

🚀 Запуск EUSRR Frontend + Backend

✅ Что уже сделано

• ✅ React frontend с Refine.dev создан
• ✅ Подключение к Django REST API настроено
• ✅ JWT авторизация реализована
• ✅ Создана страница списка сотрудников
• ✅ Настроены ресурсы для всех модулей

📋 Следующие шаги

1. Установить CORS на Django Backend

cd backend
.venv/Scripts/pip install django-cors-headers

1.5. Проверить что Daphne установлен

cd backend
.venv/Scripts/pip show daphne

Если Daphne не установлен:

.venv/Scripts/pip install daphne

Добавить в backend/eusrr_backend/settings.py:

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

2. Установить зависимости frontend

cd frontend
npm install

3. Запустить оба сервера

⚠️ ВАЖНО: Для WebSocket используйте Daphne вместо стандартного Django сервера!

Terminal 1 - Django (с WebSocket на Daphne):

cd backend
.venv/Scripts/daphne -b 0.0.0.0 -p 9000 eusrr_backend.asgi:application

Или используйте runserver для HTTP (без WebSocket):

cd backend
.venv/Scripts/python manage.py runserver 8000

Terminal 2 - React:

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

🛠️ Разработка

Создание новой страницы

Например, для документов:

mkdir -p src/pages/documents
touch src/pages/documents/{list,create,edit,show}.tsx
touch src/pages/documents/index.ts

Добавление маршрута

В src/App.tsx добавить:

<Route path="/documents">
  <Route index element={<DocumentList />} />
  <Route path="create" element={<DocumentCreate />} />
  <Route path="edit/:id" element={<DocumentEdit />} />
  <Route path="show/:id" element={<DocumentShow />} />
</Route>

🐛 Проблемы?

CORS ошибки

• Проверьте что django-cors-headers установлен
• Убедитесь что middleware добавлен правильно
• Перезапустите Django сервер

401 Unauthorized

• Проверьте что пользователь существует в БД
• Проверьте endpoint: http://localhost:8000/api/auth/token/

WebSocket error:

Это самая частая ошибка! Решение:

1. Проверьте что backend запущен через Daphne:

   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:

   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:

   # Windows - проверить какой процесс занимает порт
   netstat -ano | findstr :9000
   
   # Если занято - убейте процесс или используйте другой порт
   

Страница не загружается

• Убедитесь что оба сервера запущены
• Проверьте .env.local файл в frontend
• Откройте DevTools → Network и посмотрите статусы запросов

📚 Документация

• Frontend README: frontend/README.md
• Django CORS: docs/guides/DJANGO_CORS_SETUP.md
• API v2 Migration: 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. Добавить тесты

---

Готово! Теперь можно разрабатывать! 🚀