Remove legacy configuration files and scripts, transitioning to Vite for build and development processes. Introduce new HTML files for the landing and terms pages, along with stubs for API responses. Update package.json and package-lock.json to include Vite and related dependencies, enhancing the project structure and build efficiency.
This commit is contained in:
Primakov Alexandr Alexandrovich
@@ -2,14 +2,15 @@
|
||||
|
||||
Лендинг платформы для обучения фронтенд-разработке
|
||||
|
||||
## 🚀 Особенности v3.0
|
||||
## 🚀 Особенности v3.0 (Vite)
|
||||
|
||||
- ⚡ **Минимальные зависимости** - только необходимое
|
||||
- ⚡ **Vite** - мгновенный запуск (vs 3+ сек у webpack)
|
||||
- 📄 **Статический HTML** для идеального SEO
|
||||
- 🎨 **SCSS + CSS Modules** для гибких стилей
|
||||
- 📱 **Адаптивный дизайн** с responsive шрифтами
|
||||
- 🎯 **React** только там, где нужна динамика
|
||||
- 🔥 **Легкий bundle** terms.html (10 KB + 1.5 KB CSS, **без JS!**)
|
||||
- 🎯 **React** только для главной страницы
|
||||
- 🔌 **Express stubs** из `./stubs/api` работают как раньше!
|
||||
- 🗜️ **Легкий bundle** terms.html (13 KB + 1.5 KB CSS, **без JS!**)
|
||||
|
||||
## 📦 Установка
|
||||
|
||||
@@ -20,13 +21,14 @@ npm install
|
||||
## 🛠️ Разработка
|
||||
|
||||
```bash
|
||||
npm start # Dev сервер на http://localhost:8099
|
||||
npm start # Dev сервер на http://localhost:8099
|
||||
```
|
||||
|
||||
## 🏗️ Сборка
|
||||
|
||||
```bash
|
||||
npm run build:prod # Production сборка в ./dist
|
||||
npm run build # Production сборка в ./dist
|
||||
npm run preview # Просмотр production сборки
|
||||
```
|
||||
|
||||
## 📄 Страницы
|
||||
@@ -34,20 +36,46 @@ npm run build:prod # Production сборка в ./dist
|
||||
### Главная `/`
|
||||
- **React** приложение с анимацией Lottie
|
||||
- Динамическая страница "В разработке"
|
||||
- Файлы: `index.html` + `index.js` (916 KB) + `index.css` (190 B)
|
||||
- Dev: `http://localhost:8099/`
|
||||
- Prod: `brojs.ru/` → загружает JS с `https://static.brojs.ru/landing/main/`
|
||||
|
||||
### Terms `/terms`
|
||||
- `/terms` → автоматический редирект на `/terms.html`
|
||||
- **Чистый HTML** без JavaScript
|
||||
- Полный текст пользовательского соглашения
|
||||
- SEO-оптимизирован
|
||||
- Адаптивный дизайн
|
||||
- Файлы: `terms.html` (10.5 KB) + `terms.css` (1.5 KB)
|
||||
- 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 * as styles from './styles/main.module.scss';
|
||||
import styles from './styles/main.module.scss';
|
||||
element.className = styles.app;
|
||||
```
|
||||
|
||||
@@ -71,7 +99,7 @@ h1 {
|
||||
|
||||
## 📱 Адаптивность
|
||||
|
||||
Все размеры шрифтов автоматически уменьшаются на мобильных устройствах (< 768px):
|
||||
Все размеры шрифтов автоматически уменьшаются на мобильных (< 768px):
|
||||
- H1: 2.5rem → 1.75rem
|
||||
- H2: 1.75rem → 1.5rem
|
||||
- H3: 1.25rem → 1.1rem
|
||||
@@ -80,50 +108,78 @@ h1 {
|
||||
## 🗂️ Структура
|
||||
|
||||
```
|
||||
src/
|
||||
├── styles/
|
||||
│ ├── main.module.scss # CSS Modules для React
|
||||
│ ├── main.module.scss.d.ts # TypeScript типы
|
||||
│ └── terms.scss # SCSS для статики
|
||||
├── pages/
|
||||
│ └── under-construction/ # Главная страница
|
||||
├── index.tsx # Entry для React
|
||||
├── terms.js # Entry для CSS
|
||||
├── terms.html # Статический HTML
|
||||
└── index.ejs # Шаблон для React
|
||||
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 стили
|
||||
```
|
||||
|
||||
## 🌐 Деплой
|
||||
|
||||
После `npm run build:prod`:
|
||||
- `index.html` → `brojs.ru/`
|
||||
- `terms.html` → `brojs.ru/terms`
|
||||
- Статика → `static.brojs.ru/landing/main/`
|
||||
### 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** - типизация
|
||||
- **Webpack 5** - сборка с multiple entry points
|
||||
- **SCSS** - препроцессор
|
||||
- **CSS Modules** - изоляция стилей
|
||||
|
||||
### Библиотеки
|
||||
- **React Router DOM** - клиентский роутинг
|
||||
- **i18next** - интернационализация
|
||||
- **Lottie React** - анимации
|
||||
|
||||
### Dev зависимости
|
||||
- **sass** + **sass-loader** - компиляция SCSS
|
||||
- **css-loader** - обработка CSS (с поддержкой CSS Modules)
|
||||
- **style-loader** - инжект CSS в dev режиме
|
||||
- **mini-css-extract-plugin** - извлечение CSS в production
|
||||
- **@vitejs/plugin-react** - React Fast Refresh
|
||||
- **sass** - компиляция SCSS
|
||||
|
||||
## ⚡ Почему Vite?
|
||||
|
||||
- 🚀 **Мгновенный запуск** (HMR из коробки)
|
||||
- ⚡ **Быстрая сборка** (esbuild + Rollup)
|
||||
- 🎯 **Простая конфигурация** (70 строк vs 500+)
|
||||
- 📦 **Меньше зависимостей**
|
||||
- 🔥 **Современный стандарт**
|
||||
|
||||
## 📚 Документация
|
||||
|
||||
Полная документация в [cloud.md](./cloud.md)
|
||||
|
||||
## 🤝 Участие
|
||||
---
|
||||
|
||||
Проект использует минималистичный подход - добавляем зависимости только по мере необходимости!
|
||||
**Простота + Скорость + Мощь!** 🎉
|
||||
|
||||
Reference in New Issue
Block a user