Запуск проекта в Builder.io (Visual Editor)¶

Этот документ описывает процесс интеграции и запуска проекта для работы с визуальным редактором Builder.io.

1. Установка SDK¶

Для начала работы необходимо установить React SDK от Builder.io:

pnpm add @builder.io/react

2. Настройка API Key¶

Зарегистрируйтесь или войдите в Builder.io.
Перейдите в настройки пространства (Space Settings) -> API Key.
Добавьте этот ключ в ваш .env файл:

VITE_BUILDER_API_KEY=ваш_публичный_ключ

3. Создание страницы для Builder.io¶

Создайте универсальный маршрут (например, src/pages/builder-page.tsx), который будет отвечать за рендеринг страниц, созданных в Builder.io.

// src/pages/builder-page.tsx
import { useEffect, useState } from "react";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { useParams } from "react-router-dom";

// Инициализация с вашим ключом
builder.init(import.meta.env.VITE_BUILDER_API_KEY);

export default function BuilderPage() {
  const [content, setContent] = useState(null);
  const [notFound, setNotFound] = useState(false);
  const isPreviewing = useIsPreviewing();
  const { url } = useParams(); // Или используйте useLocation для полного пути

  useEffect(() => {
    async function fetchContent() {
      const content = await builder
        .get("page", {
          url: window.location.pathname
        })
        .promise();

      setContent(content);
      setNotFound(!content);
    }

    fetchContent();
  }, [window.location.pathname]);

  if (notFound && !isPreviewing) {
    return <div>Страница не найдена (404)</div>;
  }

  return (
    <>
      {/* Здесь можно добавить Header */}
      <BuilderComponent model="page" content={content} />
      {/* Здесь можно добавить Footer */}
    </>
  );
}

4. Настройка Роутинга¶

Добавьте этот компонент в ваш роутер (например, в App.tsx или routes.tsx). Рекомендуется ставить его в конец списка как "catch-all" маршрут, чтобы он обрабатывал все пути, не занятые жестко закодированными страницами.

// App.tsx
import { Routes, Route } from "react-router-dom";
import BuilderPage from "./pages/builder-page";

function App() {
  return (
    <Routes>
      {/* Ваши существующие маршруты */}
      <Route path="/" element={<HomePage />} />
      <Route path="/admin" element={<AdminPage />} />

      {/* Маршрут для Builder.io */}
      <Route path="*" element={<BuilderPage />} />
    </Routes>
  );
}

5. Регистрация Кастомных Компонентов¶

Чтобы использовать ваши React-компоненты (например, кнопки, карточки отелей) внутри визуального редактора, их нужно зарегистрировать.

// src/builder-registry.ts
import { Builder } from "@builder.io/react";
import { Button } from "./components/ui/button";

Builder.registerComponent(Button, {
  name: "ShadcnButton",
  inputs: [
    { name: "children", type: "string", defaultValue: "Click me" },
    { name: "variant", type: "string", enum: ["default", "destructive", "outline"] },
  ],
});

Не забудьте импортировать этот файл в точке входа приложения (main.tsx или App.tsx):

import "./builder-registry";

6. Запуск и Подключение¶

Запустите ваш локальный сервер разработки:
```
pnpm dev
```
Убедитесь, что он доступен по адресу http://localhost:8000 (или другой порт).
Перейдите в Builder.io -> Models -> Page -> New Entry.
В редакторе укажите Preview URL на ваш локальный хост: http://localhost:8000.
- Примечание: Если Builder.io не видит localhost, возможно, потребуется использовать туннель (например, ngrok) или убедиться, что браузер не блокирует смешанный контент.

Теперь вы можете перетаскивать ваши зарегистрированные компоненты и строить страницы визуально, используя ваш живой код.