Установка пакета маркетплейса для React
Выберите технологию и установите пакет для подключения маркетплейса. Каждый пакет создаёт рабочий стартовый проект и подключает его к вашему персональному бэкенду.
1 Подготовьте окружение
Установите Node.js версии 20.9 или новее вместе с npm. Интеграция Next.js 16 работает на сервере Node.js. Проверьте установленные версии:
Скачать Node.jsnode --version
npm --version2 Начните с нуля
Выполните команды в папке, где храните проекты. CLI создаст проект Next.js 16, добавит пакет Orionplace и исходный код подключения.
npx --yes orionplace-react init my-marketplace
cd my-marketplace
npm installУже есть проект Next.js 16?
Пропустите создание проекта. Установите пакет в корне существующего проекта Next.js 16, затем перейдите к настройке доменов ниже.
npm install orionplace-react3 Укажите домены
Откройте личный профиль на orionmarket.place. Домен вашего персонального API бэкенда уже выдан и указан там. При необходимости его можно изменить в профиле.
# Замените your-project.orionplace.app на домен бэкенда из профиля
npx orionplace-react set backend your-project.orionplace.app
# Замените yourfrontenddomain.com на домен вашего магазина
npx orionplace-react add frontend yourfrontenddomain.com
npm installВыполните команды в корне проекта. Они настроят подключение, а последняя команда установит необходимые зависимости. Команды настройки доменов не создают DNS-записи и не публикуют сайт.
MIMIC_FRONT_DOMAIN — первый добавленный домен магазина автоматически выбирается для локальной разработки.
4 Запустите проект
npm run devОткройте локальный адрес, который напечатает Next.js 16, обычно http://localhost:3000. После успешного Application Load откроется магазин. Если инициализация завершилась ошибкой, проверьте настройку доменов и доступность бэкенда.
orionplace/README.md — подробности настройки, документация исходного кода и управление доменами. Все команды доступны через help:
npx orionplace-react helpУправляйте доменами
Выполняйте команды из корня проекта. Замените домены в примерах на свои. Для каждого домена магазина создаётся файл с именем этого домена, например sitemaps/yourfrontenddomain.com.cfg.
| Команда | Результат |
|---|---|
set backend <domain> | Задаёт персональный бэкенд и обновляет адрес во всех файлах доменов, которыми управляет CLI. Указать бэкенд и добавить первый домен магазина можно в любом порядке. |
add frontend <domain> | Добавляет домен и сохраняет существующие домены. Первый домен выбирается для MIMIC_FRONT_DOMAIN; последующие добавления сохраняют текущий выбор. Повторное добавление того же домена допустимо. |
set mimic <domain> | Выбирает уже добавленный домен для localhost. Файлы соответствия доменов и бэкенда сохраняются без изменений. Неизвестный домен сначала добавьте через add frontend. |
remove frontend <domain> | Удаляет указанный домен и его созданный CLI файл, если файл не изменён вручную. Если домен был выбран для MIMIC, выбирается первый оставшийся домен. Удаление последнего домена очищает MIMIC. |
set frontend <domain> | Добавляет домен и выбирает его для MIMIC. Эта сокращённая команда остаётся доступной для существующих скриптов. |
help | Показывает команды и параметры без изменения файлов проекта. |
npx orionplace-react add frontend www.yourfrontenddomain.com
npx orionplace-react set mimic yourfrontenddomain.com
npx orionplace-react remove frontend www.yourfrontenddomain.comCLI проверяет запланированные изменения до записи файлов. Попытка заменить или удалить файл домена, изменённый вручную или созданный вне CLI, завершится ошибкой. Добавьте --dry-run, чтобы посмотреть изменения без записи файлов проекта, или --cwd path/to/project, чтобы выбрать другой проект.
После изменения доменов перезапустите сервер разработки. В production файлы доменов читаются при каждом запросе; после изменения MIMIC перезагрузите окружение процесса. Настройте DNS, TLS и прокси на хостинге для каждого публичного домена.
Карта сайта и robots.txt
Магазин отдаёт /robots.txt и /sitemap.xml для каждого домена фронтенда. В карте сайта есть публичные страницы, категории, товары в продаже и публикации журнала на всех языках магазина; публикация попадает в неё только на тех языках, на которых она написана. Каждая из этих страниц указывает свой адрес из карты сайта как канонический (canonical и og:url), а превью ссылок получают полный адрес картинки страницы. Эти же страницы ссылаются на свои версии на других языках магазина (hreflang), а публикация журнала сообщает поисковикам дату публикации и данные статьи.
Карта сайта собирается из вашего бэкенда и пересобирается раз в час. После новых публикаций или изменений каталога пересоберите её сразу из папки проекта: работающий магазин начнёт отдавать новую карту без перезапуска.
# Все домены фронтенда
npm run orionplace:sitemap
# Один домен
npx orionplace-react sitemap rebuild yourfrontenddomain.com
# Когда собрана каждая карта
npx orionplace-react sitemap statusСобранная карта хранится в node_modules/.cache/orionplace/sitemaps/; переменная ORIONPLACE_CACHE_DIR переносит её в другую папку. На сервере, где магазин работает как служба, команду можно запускать через sudo: созданные файлы остаются у владельца проекта. Проекты, созданные до версии 0.6.0, получают эти маршруты и команду через update.
Чтобы страницы магазина на демо- или тестовом сайте не попадали в поисковые системы, задайте в .env переменную ORIONPLACE_NOINDEX_PATHS с префиксами путей через пробел, например ORIONPLACE_NOINDEX_PATHS="/catalog /category /product". Эти страницы отвечают с заголовком X-Robots-Tag: noindex, follow, а карта сайта их не включает; журнал и остальные страницы по-прежнему индексируются. На рабочем магазине оставьте переменную пустой.
Каждая страница товара содержит данные schema.org для Google и Яндекса: цену, зачёркнутую старую цену, наличие, фото, бренд, продавца, рейтинг и условия возврата, которые показывает страница. В условиях возврата указываются страны доставки магазина — их передаёт Application Load в init.shipping_countries; без стран доставки условия возврата не указываются. Стоимость доставки не указывается: она зависит от адреса покупателя.
Обновите проект
Сначала посмотрите запланированные изменения, затем выполните обновление. Команда update получает последнюю версию пакета, добавляет новые исходные файлы, обновляет созданные ранее файлы без ваших правок и запускает npm install.
npx orionplace-react update --dry-runnpx orionplace-react updateИсходные файлы с вашими правками, настройки доменов и MIMIC сохраняются. Проверьте список сохранённых файлов и при необходимости перенесите в них изменения. Сохраняйте orionplace/.generated.json: CLI использует его, чтобы распознавать созданные ранее файлы без ваших правок.
Предварительный просмотр может загрузить последнюю версию пакета в кеш npm, но сохраняет файлы и зависимости проекта без изменений. Если установка зависимостей завершилась ошибкой после обновления исходных файлов, выполните npm install и повторите обновление. После успешного обновления перезапустите сервер разработки или соберите и разверните production заново.