315 lines
8.4 KiB
Markdown
315 lines
8.4 KiB
Markdown
# 🚀 Быстрый старт нового Frontend
|
|
|
|
## Шаг 1: Инициализация проекта
|
|
|
|
```bash
|
|
cd front_material
|
|
|
|
# Создать Next.js проект БЕЗ Tailwind CSS
|
|
npx create-next-app@latest . --typescript --no-tailwind --app --no-src-dir --eslint
|
|
|
|
# Установить зависимости
|
|
npm install @material/web axios date-fns
|
|
npm install livekit-client
|
|
|
|
# Установить dev зависимости
|
|
npm install -D @types/node @types/react @types/react-dom
|
|
```
|
|
|
|
**⚠️ Важно:** Создаем проект **БЕЗ Tailwind CSS**, используем только Material Web Components!
|
|
|
|
## Шаг 2: Базовая структура папок
|
|
|
|
Создать следующую структуру:
|
|
|
|
```
|
|
front_material/
|
|
├── app/ # Next.js App Router
|
|
│ ├── (auth)/ # Публичные страницы
|
|
│ │ ├── login/
|
|
│ │ ├── register/
|
|
│ │ └── layout.tsx
|
|
│ ├── (protected)/ # Защищенные страницы
|
|
│ │ ├── dashboard/
|
|
│ │ ├── schedule/
|
|
│ │ ├── chat/
|
|
│ │ └── layout.tsx
|
|
│ ├── layout.tsx
|
|
│ └── page.tsx
|
|
├── components/ # React компоненты
|
|
│ ├── navigation/ # Навигация (Material Navigation)
|
|
│ ├── layout/ # Layout компоненты
|
|
│ └── pages/ # Страничные компоненты
|
|
├── contexts/ # React Context
|
|
├── hooks/ # Custom hooks
|
|
├── api/ # API клиенты
|
|
├── lib/ # Утилиты и импорты Material
|
|
├── styles/ # CSS стили
|
|
│ ├── material-theme.css # Material UI тема
|
|
│ ├── material-grid.css # Material Grid System
|
|
│ ├── ios-effects.css # iOS 24+ эффекты
|
|
│ └── globals.css # Глобальные стили
|
|
├── types/ # TypeScript типы
|
|
│ └── material-web.d.ts # Типы для Material Web Components
|
|
├── public/ # Статические файлы
|
|
├── assets/ # Ассеты (уже есть - logo, favicon)
|
|
├── Dockerfile
|
|
├── .dockerignore
|
|
├── .env.example
|
|
├── package.json
|
|
└── tsconfig.json
|
|
```
|
|
|
|
## Шаг 3: Настройка Material Web Components
|
|
|
|
Создать файл `styles/material-theme.css`:
|
|
|
|
```css
|
|
/* Material Design 3 цвета на основе landing_site */
|
|
:root {
|
|
/* Primary (основной фиолетовый из landing_site) */
|
|
--md-sys-color-primary: #7444FD;
|
|
--md-sys-color-on-primary: #FFFFFF;
|
|
--md-sys-color-primary-container: #FAF8FF;
|
|
--md-sys-color-on-primary-container: #282C32;
|
|
|
|
/* Secondary */
|
|
--md-sys-color-secondary: #7444FD;
|
|
--md-sys-color-on-secondary: #FFFFFF;
|
|
--md-sys-color-secondary-container: #F9F3EF;
|
|
--md-sys-color-on-secondary-container: #282C32;
|
|
|
|
/* Surface */
|
|
--md-sys-color-surface: #FFFFFF;
|
|
--md-sys-color-on-surface: #282C32;
|
|
--md-sys-color-surface-variant: #F6F7FF;
|
|
--md-sys-color-on-surface-variant: #858585;
|
|
|
|
/* Background */
|
|
--md-sys-color-background: #F6F7FF;
|
|
--md-sys-color-on-background: #282C32;
|
|
|
|
/* Error */
|
|
--md-sys-color-error: #BA1A1A;
|
|
--md-sys-color-on-error: #FFFFFF;
|
|
|
|
/* Outline */
|
|
--md-sys-color-outline: #E6E6E6;
|
|
--md-sys-color-outline-variant: #F1F1F1;
|
|
|
|
/* iOS 24+ стиль */
|
|
--ios-blur: blur(20px);
|
|
--ios-radius: 20px;
|
|
--ios-radius-sm: 16px;
|
|
--ios-radius-lg: 24px;
|
|
--ios-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Темная тема */
|
|
[data-theme="dark"] {
|
|
--md-sys-color-primary: #9D6AFF;
|
|
--md-sys-color-on-primary: #000000;
|
|
--md-sys-color-primary-container: #4A148C;
|
|
--md-sys-color-on-primary-container: #E1BEE7;
|
|
|
|
--md-sys-color-surface: #161921;
|
|
--md-sys-color-on-surface: #FFFFFF;
|
|
--md-sys-color-surface-variant: #282C32;
|
|
--md-sys-color-on-surface-variant: #cbcbcb;
|
|
|
|
--md-sys-color-background: #161921;
|
|
--md-sys-color-on-background: #FFFFFF;
|
|
|
|
--md-sys-color-outline: #565656;
|
|
--md-sys-color-outline-variant: #282C32;
|
|
}
|
|
```
|
|
|
|
Создать файл `styles/material-grid.css`:
|
|
|
|
```css
|
|
/* Material Design 3 Grid System */
|
|
.md-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 16px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* Responsive breakpoints */
|
|
@media (min-width: 600px) {
|
|
.md-grid {
|
|
gap: 24px;
|
|
padding: 0 24px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1240px) {
|
|
.md-grid {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* Column classes */
|
|
.md-col-1 { grid-column: span 1; }
|
|
.md-col-2 { grid-column: span 2; }
|
|
.md-col-3 { grid-column: span 3; }
|
|
.md-col-4 { grid-column: span 4; }
|
|
.md-col-6 { grid-column: span 6; }
|
|
.md-col-8 { grid-column: span 8; }
|
|
.md-col-12 { grid-column: span 12; }
|
|
```
|
|
|
|
Импортировать в `app/layout.tsx`:
|
|
|
|
```typescript
|
|
import '@/lib/material-components'; // Импорт всех Material компонентов
|
|
import '@/styles/material-theme.css';
|
|
import '@/styles/material-grid.css';
|
|
import '@/styles/globals.css';
|
|
```
|
|
|
|
## Шаг 4: Обновление docker-compose.yml
|
|
|
|
Добавить в `docker-compose.yml` (в корне проекта):
|
|
|
|
```yaml
|
|
# Новый frontend Material UI
|
|
front_material:
|
|
build:
|
|
context: ./front_material
|
|
dockerfile: Dockerfile
|
|
target: development
|
|
args:
|
|
- NODE_VERSION=20
|
|
container_name: platform_front_material
|
|
restart: unless-stopped
|
|
command: npm run dev
|
|
environment:
|
|
- NODE_ENV=development
|
|
- NEXT_PUBLIC_API_URL=http://web:8000/api
|
|
- NEXT_PUBLIC_WS_URL=ws://web:8000/ws
|
|
- NEXT_PUBLIC_LIVEKIT_URL=ws://livekit:7880
|
|
- WATCHPACK_POLLING=true
|
|
- CHOKIDAR_USEPOLLING=true
|
|
ports:
|
|
- "3000:3000"
|
|
volumes:
|
|
- ./front_material:/app
|
|
- /app/node_modules
|
|
- /app/.next
|
|
networks:
|
|
- app_network
|
|
depends_on:
|
|
- web
|
|
stdin_open: true
|
|
tty: true
|
|
```
|
|
|
|
**Важно:** Закомментировать или удалить старый `frontend` сервис.
|
|
|
|
## Шаг 5: Создание Dockerfile
|
|
|
|
Создать `front_material/Dockerfile`:
|
|
|
|
```dockerfile
|
|
# Development stage
|
|
FROM node:20-alpine AS development
|
|
|
|
WORKDIR /app
|
|
|
|
# Копируем package files
|
|
COPY package*.json ./
|
|
|
|
# Устанавливаем зависимости
|
|
RUN npm install
|
|
|
|
# Копируем остальные файлы
|
|
COPY . .
|
|
|
|
# Открываем порт
|
|
EXPOSE 3000
|
|
|
|
# Запускаем dev server
|
|
CMD ["npm", "run", "dev"]
|
|
|
|
# Production stage
|
|
FROM node:20-alpine AS production
|
|
|
|
WORKDIR /app
|
|
|
|
# Копируем package files
|
|
COPY package*.json ./
|
|
|
|
# Устанавливаем только production зависимости
|
|
RUN npm ci --only=production
|
|
|
|
# Копируем исходный код
|
|
COPY . .
|
|
|
|
# Собираем приложение
|
|
RUN npm run build
|
|
|
|
# Открываем порт
|
|
EXPOSE 3000
|
|
|
|
# Запускаем production server
|
|
CMD ["npm", "start"]
|
|
```
|
|
|
|
## Шаг 6: Создание .dockerignore
|
|
|
|
Создать `front_material/.dockerignore`:
|
|
|
|
```
|
|
node_modules
|
|
.next
|
|
.env.local
|
|
.env*.local
|
|
npm-debug.log*
|
|
yarn-debug.log*
|
|
yarn-error.log*
|
|
.DS_Store
|
|
*.pem
|
|
```
|
|
|
|
## Шаг 7: Создание .env.example
|
|
|
|
Создать `front_material/.env.example`:
|
|
|
|
```env
|
|
# API
|
|
NEXT_PUBLIC_API_URL=http://localhost:8123/api
|
|
NEXT_PUBLIC_WS_URL=ws://localhost:8123/ws
|
|
|
|
# LiveKit
|
|
NEXT_PUBLIC_LIVEKIT_URL=ws://localhost:7880
|
|
|
|
# Environment
|
|
NODE_ENV=development
|
|
```
|
|
|
|
## Шаг 8: Запуск
|
|
|
|
```bash
|
|
# Локально (без Docker)
|
|
cd front_material
|
|
npm install
|
|
npm run dev
|
|
|
|
# Или через Docker Compose (из корня проекта)
|
|
docker compose up front_material
|
|
|
|
# Или все сервисы вместе
|
|
docker compose up
|
|
```
|
|
|
|
## Следующие шаги
|
|
|
|
Следуйте плану из `IMPLEMENTATION_PLAN.md`:
|
|
1. Этап 1: Подготовка проекта ✅
|
|
2. Этап 2: Дизайн-система и компоненты
|
|
3. Этап 3: Архитектура
|
|
4. И так далее...
|