Skip to main content

Vite + React

Как устроен фронтенд @lowcode/builder-web: сборка, разработка, горячая перезагрузка и структура проекта.

🎯 Зачем эта страница​

Цель — объяснить:

  • почему для builder-web используется Vite;
  • как работает быстрый dev-сервер и HMR;
  • что делает React в этом проекте;
  • как устроены основные директории builder-web;
  • как запускается приложение локально и как оно интегрируется с API.

1. Что такое Vite​

Vite — современный инструмент сборки фронтенда, который использует:

  • нативные ES-модули в dev-режиме;
  • esbuild для сверхбыстрой предварительной обработки;
  • Rollup для продакшн-билда.

Основные преимущества:

  • ⚡ Молниеносный старт dev-сервера (даже в больших проектах);
  • 🔥 Быстрый Hot Module Replacement (моментальная перезагрузка страницы);
  • 📦 Простой, предсказуемый build на Rollup;
  • 🧩 Легко расширяется плагинами (например, для React).

2. Что делает React​

React используется как движок интерфейса для визуального конструктора builder-web:

  • отрисовка UI через компоненты;
  • управление состоянием (обычно через React hooks);
  • рендеринг DSL-структуры в визуальное представление.

Builder-web — это SPA (Single Page Application), которое рендерится полностью на клиенте.

3. Минимальный пример Vite + React​

Простейшее приложение может выглядеть так:

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Конфигурация проекта:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Запуск:

pnpm dev

Vite поднимет сервер на http://localhost:5173.

4. Как Vite используется в @lowcode/builder-web​

4.1. Основная структура​

Примерная структура модуля:

apps/builder-web/
  src/
    api/               ← клиент для общения с @lowcode/api
    components/        ← UI-компоненты
    editor/            ← логика визуального редактора
    preview/           ← механизм выполнения DSL-приложения
    pages/             ← страницы SPA
    main.tsx           ← точка входа
  vite.config.ts       ← конфигурация сборки
  index.html           ← HTML-шаблон для приложения

4.2. Главный поток данных в builder-web​

Пользователь → React-компоненты → состояние редактора → API-запросы → сохранение проекта

4.3. Интеграция с API​

Vite позволяет задавать прокси для dev-сервера. Это используется, чтобы builder-web мог обращаться к backend без CORS:

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3001', // API-сервер @lowcode/api
    },
  },
});

Теперь любой запрос вида:

fetch("/api/projects")

будет автоматически проксироваться на бекенд.

5. Как устроен dev-режим​

Когда ты запускаешь:

pnpm --filter @lowcode/builder-web dev

происходит следующее:

  • Vite запускает свой HTTP-сервер;
  • обрабатывает только изменённые файлы через esbuild;
  • React компоненты обновляются без перезагрузки страницы благодаря HMR;
  • API-запросы уходят на backend через прокси.

В итоге разработка интерфейса получается максимально быстрой.

6. Продакшн-сборка​

Команда:

pnpm build

создаёт папку dist/, в которой лежит готовый бандл.

Сборка использует Rollup:

  • дерево модулей оптимизируется;
  • CSS объединяется;
  • импортированные изображения минифицируются.

7. Где искать ключевые файлы builder-web​

КомпонентПутьОписание
Vite configapps/builder-web/vite.config.tsНастройки dev-сервера и сборки
Точка входаapps/builder-web/src/main.tsxИнициализация React-приложения
HTML-шаблонapps/builder-web/index.htmlКорневой HTML для SPA
API-клиентapps/builder-web/src/api/*Работа с backend
Логика редактораapps/builder-web/src/editor/*Обработка DSL, drag-n-drop и т.п.
Превью DSL-приложенийapps/builder-web/src/preview/*Выполнение DSL-бандлов

8. Что нужно знать разработчику​

Для комфортной работы с builder-web достаточно понимать:

  • основы React (компоненты, состояние, props);
  • основные принципы Vite (dev-server, HMR, proxy, build);
  • структуру src/;
  • базовый принцип общения с backend через API-клиент.

Всё остальное — уже внутренняя логика редактора, и она описывается в других разделах документации.