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!)

📦 Установка

npm install

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

npm start          # Dev сервер на http://localhost:8099

🏗️ Сборка

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/:

// stubs/api/test.js → /api/test
module.exports = (req, res) => {
  res.json({ message: 'Hello from stub!' });
};

// 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 компонентов)

import styles from './styles/main.module.scss';
element.className = styles.app;

Преимущества:

• Изоляция стилей
• Автоматические уникальные имена классов
• TypeScript поддержка

Обычный 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:

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

---

Простота + Скорость + Мощь! 🎉