Хостинг React: Vite, React Router, прямі посилання

Q: Чи можна розмістити тут проєкт Create React App?

Так. Виконайте npm run build і npx lobsite; папку build/ буде знайдено й розгорнуто. Увімкніть односторінковий режим, якщо використовується React Router із браузерними маршрутами.

Q: Чи може форма React надсилати відповіді без бекенду?

Так, якщо форма міститься в зібраному HTML, наприклад у index.html, і надсилає на /_lobsite/forms/contact. Форму, яку малює лише React, не буде знайдено під час розгортання, і її відповіді відхилятимуться. Документація форм пояснює, як залишити форму в HTML і надсилати через fetch().

Більшість сучасних застосунків 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

Команда React оголосила Create React App застарілим у лютому 2025 року та рекомендує фреймворк або 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 байтів.

Кожне розгортання має власну URL-адресу

Перегляньте перед публікацією. Відкотіть одним натисканням разом із перенаправленнями.

HTTPS скрізь

Кожен сайт отримує адресу *.lobsite.app із HTTPS від першого розгортання.

Форми, які просто працюють

Спрямуйте форму на /_lobsite/forms/contact. Фільтрація спаму включена.

Спробуйте без облікового запису

Сайт без облікового запису працює 6 годин. Посилання для збереження дозволяє залишити його безкоштовно.

Порівняння хостингів React

	Lobsite	Netlify	Vercel	GitHub Pages
Прямі посилання React Router	`spa = true` або перемикач у панелі керування	Правило `_redirects`	Перезапис у `vercel.json`	Ні: `HashRouter` або `404.html` зі статусом 404
Відсутні файли скриптів після розгортання	404, зрозуміла помилка	`index.html` застосунку	`index.html` застосунку	404
Серверний рендеринг	Ні	Так, із фреймворком	Так, із фреймворком	Ні
Обліковий запис перед першим розгортанням	Ні: працює 6 годин, потім можна зберегти безкоштовно	Так	Так	Так, і репозиторій
Форми без бекенду	Так, після додавання сайту до облікового запису	Так	Ні	Ні
Власний домен	Так, безкоштовно	Так	Так	Так

Для застосунку React, який працює в браузері, як результат Vite, Lobsite розгортає його однією командою, завантажує лише змінені частини й зберігає URL перегляду для кожного розгортання.

Поширені запитання

Чому оновлення сторінки React Router показує «Не знайдено»?

Адреса існує лише всередині застосунку, тому сервер не має для неї файлу. Увімкніть односторінковий режим через 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 призначений для серверного рендерингу чи попередньо згенерованих сторінок і має власний статичний експорт.

Хостинг React-застосунків