Большинство React-приложений сегодня собираются через Vite в папку статических файлов: один index.html и JavaScript, который рисует каждую страницу. Lobsite размещает эту папку. Выполните npm run build, затем npx lobsite, и приложение заработает по адресу *.lobsite.app с HTTPS. Глубокие ссылки React Router работают, как только включён одностраничный режим.
Как это работает
- Соберите приложение командой
npm run build. Проект на Vite записываетdist/, старый проект Create React App —build/. - Выполните
npx lobsiteв проекте. Команда найдёт папку сборки и задеплоит её. Первый деплой не требует аккаунта и живёт 6 часов. - Включите одностраничный режим для React Router:
spa = trueвlobsite.tomlили Одностраничное приложение в настройках сайта. Сохраните сайт по ссылке для получения в бесплатном аккаунте.
React Router и глубокие ссылки
С createBrowserRouter или <BrowserRouter> адреса выглядят как /orders/42. Переход по ссылке работает везде, потому что React Router меняет страницу в браузере. А если открыть этот адрес напрямую или обновить страницу, браузер запросит у сервера /orders/42, а такого файла нет. Одностраничный режим отвечает вашим index.html, и React Router рисует нужную страницу.
<HashRouter>(адреса вида/#/orders/42) работает без одностраничного режима: сервер видит только/. Браузерные маршруты выглядят лучше, и именно их ждут поисковики.- Фреймворк-режим React Router с
ssr: falseтоже собирает одностраничное приложение. Сprerenderперечисленные страницы записываются отдельными HTML-файлами, а остальное покрывает одностраничный режим. - TanStack Router и wouter работают так же, как React Router.
Деплой показывает подсказку, если находит роутер в package.json, а одностраничный режим выключен.
Переход с Create React App
В феврале 2025 года команда React объявила Create React App устаревшим и рекомендует для новых приложений фреймворк или Vite. Проект на CRA по-прежнему деплоится: npx lobsite находит build/ и пропускает public/, который CRA копирует в сборку. Переход на Vite меняет пару вещей со стороны хостинга:
- папкой сборки становится
dist/, она находится так же; - переменные окружения
REACT_APP_превращаются вVITE_и читаются черезimport.meta.env; index.htmlпереезжает изpublic/в корневую папку проекта.
Если приложению нужен серверный рендеринг, посмотрите на Next.js со статическим экспортом или на хостинг, который запускает React на сервере.
spa = true в lobsite.toml или один переключатель в панели: глубокие ссылки открывают приложение, отсутствующие файлы по-прежнему дают 404.
Файлы хранятся по хешу. Повторный деплой неизменённого сайта загружает 0 байт.
Предпросмотр до публикации. Откат в один клик — вместе с перенаправлениями.
Каждый сайт получает адрес *.lobsite.app с HTTPS с первого деплоя.
Направьте форму на /_lobsite/forms/contact. Фильтр спама включён.
Деплой без аккаунта работает 6 часов. Ссылка для получения сохранит его бесплатно.
Сравнение хостингов для React
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Глубокие ссылки React Router | spa = true или переключатель в панели |
Правило _redirects |
Rewrite в vercel.json |
Нет: HashRouter или 404.html со статусом 404 |
| Отсутствующие файлы скриптов после деплоя | 404, понятная ошибка | index.html приложения |
index.html приложения |
404 |
| Серверный рендеринг | Нет | Да, с фреймворком | Да, с фреймворком | Нет |
| Аккаунт до первого деплоя | Нет: 6 часов онлайн, затем сохраните бесплатно | Да | Да | Да, и репозиторий |
| Формы без бэкенда | Да, когда сайт в аккаунте | Да | Нет | Нет |
| Свой домен | Да, бесплатно | Да | Да | Да |
React-приложение, работающее в браузере, — а именно его собирает Vite — Lobsite деплоит одной командой, загружает только изменившиеся чанки и хранит URL предпросмотра для каждого деплоя.
Частые вопросы
Почему при обновлении страницы React Router появляется «Not found»?
Такой адрес существует только внутри приложения, поэтому у сервера нет для него файла. Включите одностраничный режим через spa = true в lobsite.toml или Одностраничное приложение в настройках сайта.
Можно разместить здесь проект Create React App?
Да. Выполните npm run build и npx lobsite: папка build/ найдётся и задеплоится. Включите одностраничный режим, если используется React Router с браузерными маршрутами.
Может ли форма на React отправлять заявки без бэкенда?
Да, если форма есть в собранном HTML, например в index.html, и отправляет данные на /_lobsite/forms/contact. Форма, которую рисует только React, при деплое не находится, и её заявки отклоняются. В документации по формам описано, как оставить форму в HTML и отправлять её через fetch().
Нужен ли Next.js, чтобы разместить React-приложение?
Нет. React-приложение, собранное через Vite, — это обычные файлы, и оно работает на любом статическом хостинге. Next.js нужен для серверного рендеринга или пререндеренных страниц, и у него есть собственный статический экспорт.