186 lines
5.6 KiB
Markdown
186 lines
5.6 KiB
Markdown
# BROJS.RU Landing
|
||
|
||
Лендинг платформы для обучения фронтенд-разработке
|
||
|
||
## 🚀 Особенности v3.0 (Vite)
|
||
|
||
- ⚡ **Vite** - мгновенный запуск (vs 3+ сек у webpack)
|
||
- 📄 **Статический HTML** для идеального SEO
|
||
- 🎨 **SCSS + CSS Modules** для гибких стилей
|
||
- 📱 **Адаптивный дизайн** с responsive шрифтами
|
||
- 🎯 **React** только для главной страницы
|
||
- 🔌 **Express stubs** из `./stubs/api` работают как раньше!
|
||
- 🗜️ **Легкий bundle** terms.html (13 KB + 1.5 KB CSS, **без JS!**)
|
||
|
||
## 📦 Установка
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
## 🛠️ Разработка
|
||
|
||
```bash
|
||
npm start # Dev сервер на http://localhost:8099
|
||
```
|
||
|
||
## 🏗️ Сборка
|
||
|
||
```bash
|
||
npm run build # Production сборка в ./dist
|
||
npm run preview # Просмотр production сборки
|
||
```
|
||
|
||
## 📄 Страницы
|
||
|
||
### Главная `/`
|
||
- **React** приложение с анимацией Lottie
|
||
- Динамическая страница "В разработке"
|
||
- Dev: `http://localhost:8099/`
|
||
- Prod: `brojs.ru/` → загружает JS с `https://static.brojs.ru/landing/main/`
|
||
|
||
### Terms `/terms`
|
||
- `/terms` → автоматический редирект на `/terms.html`
|
||
- **Чистый HTML** без JavaScript
|
||
- Полный текст пользовательского соглашения
|
||
- SEO-оптимизирован
|
||
- Адаптивный дизайн
|
||
- Dev: `http://localhost:8099/terms`
|
||
- Prod: `brojs.ru/terms` → загружает CSS с `https://static.brojs.ru/landing/main/`
|
||
|
||
## 🔌 API Stubs
|
||
|
||
Создавай заглушки API в `./stubs/api/`:
|
||
|
||
```javascript
|
||
// stubs/api/test.js → /api/test
|
||
module.exports = (req, res) => {
|
||
res.json({ message: 'Hello from stub!' });
|
||
};
|
||
```
|
||
|
||
```javascript
|
||
// stubs/api/user.js → /api/user
|
||
module.exports.default = {
|
||
id: 1,
|
||
name: 'John Doe'
|
||
};
|
||
```
|
||
|
||
Примеры:
|
||
- `http://localhost:8099/api/test`
|
||
- `http://localhost:8099/api/user`
|
||
|
||
## 🎨 Стилизация
|
||
|
||
### CSS Modules (для React компонентов)
|
||
```typescript
|
||
import styles from './styles/main.module.scss';
|
||
element.className = styles.app;
|
||
```
|
||
|
||
**Преимущества:**
|
||
- Изоляция стилей
|
||
- Автоматические уникальные имена классов
|
||
- TypeScript поддержка
|
||
|
||
### Обычный SCSS (для статических страниц)
|
||
```scss
|
||
// terms.scss
|
||
$mobile: 768px;
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
@media (max-width: $mobile) {
|
||
font-size: 1.75rem; // Адаптивный шрифт
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📱 Адаптивность
|
||
|
||
Все размеры шрифтов автоматически уменьшаются на мобильных (< 768px):
|
||
- H1: 2.5rem → 1.75rem
|
||
- H2: 1.75rem → 1.5rem
|
||
- H3: 1.25rem → 1.1rem
|
||
- Body: 1rem → 0.95rem
|
||
|
||
## 🗂️ Структура
|
||
|
||
```
|
||
bro.landing/
|
||
├── index.html # Entry для главной
|
||
├── terms.html # Entry для Terms (статика)
|
||
├── vite.config.ts # Конфигурация Vite
|
||
├── src/
|
||
│ ├── index.tsx # React entry
|
||
│ ├── app.tsx # React App
|
||
│ ├── dashboard.tsx # Роутинг
|
||
│ ├── pages/
|
||
│ │ └── under-construction/
|
||
│ └── styles/
|
||
│ ├── main.module.scss # CSS Modules для React
|
||
│ └── terms.scss # SCSS для Terms
|
||
├── stubs/
|
||
│ └── api/
|
||
│ ├── test.js # Пример: GET /api/test
|
||
│ └── user.js # Пример: GET /api/user
|
||
└── dist/ # Build output
|
||
├── index.html # Главная
|
||
├── main.[hash].js # React bundle
|
||
├── terms.html # Terms статика
|
||
└── terms.[hash].css # Terms стили
|
||
```
|
||
|
||
## 🌐 Деплой
|
||
|
||
### Production URLs
|
||
После `npm run build` и деплоя:
|
||
- **Главная**: `brojs.ru/` → `dist/index.html`
|
||
- JS: `https://static.brojs.ru/landing/main/main.[hash].js`
|
||
- **Terms**: `brojs.ru/terms` → `dist/terms.html`
|
||
- CSS: `https://static.brojs.ru/landing/main/terms.[hash].css`
|
||
|
||
### Vite автоматически подставляет CDN пути
|
||
В `vite.config.ts`:
|
||
```typescript
|
||
base: isProd
|
||
? 'https://static.brojs.ru/landing/main/' // Production
|
||
: '/' // Dev
|
||
```
|
||
|
||
Vite **автоматически** заменит все пути к ассетам на CDN URL в production!
|
||
|
||
## 🔧 Технологии
|
||
|
||
### Core
|
||
- **Vite 7** - молниеносная сборка
|
||
- **React 18** - только для динамических частей
|
||
- **TypeScript** - типизация
|
||
- **SCSS** - препроцессор
|
||
- **CSS Modules** - изоляция стилей
|
||
|
||
### Библиотеки
|
||
- **React Router DOM** - клиентский роутинг
|
||
- **Lottie React** - анимации
|
||
|
||
### Dev зависимости
|
||
- **@vitejs/plugin-react** - React Fast Refresh
|
||
- **sass** - компиляция SCSS
|
||
|
||
## ⚡ Почему Vite?
|
||
|
||
- 🚀 **Мгновенный запуск** (HMR из коробки)
|
||
- ⚡ **Быстрая сборка** (esbuild + Rollup)
|
||
- 🎯 **Простая конфигурация** (70 строк vs 500+)
|
||
- 📦 **Меньше зависимостей**
|
||
- 🔥 **Современный стандарт**
|
||
|
||
## 📚 Документация
|
||
|
||
Полная документация в [cloud.md](./cloud.md)
|
||
|
||
---
|
||
|
||
**Простота + Скорость + Мощь!** 🎉
|