Większość dzisiejszych aplikacji React jest budowana przez Vite do folderu plików statycznych: jednego index.html i JavaScriptu, który rysuje każdą stronę. Lobsite hostuje ten folder. Uruchom npm run build, potem npx lobsite, a aplikacja będzie działać pod adresem *.lobsite.app z HTTPS. Głębokie linki React Router działają po włączeniu trybu jednostronicowego.
Jak to działa
- Zbuduj aplikację przez
npm run build. Projekt Vite zapisujedist/; starszy projekt Create React App zapisujebuild/. - Uruchom
npx lobsitew projekcie. Znajdzie folder z buildem i go wdroży. Pierwsze wdrożenie nie wymaga konta i trwa 6 godzin. - Włącz tryb jednostronicowy dla React Router:
spa = truewlobsite.tomlalbo Aplikacja jednostronicowa w ustawieniach strony. Zachowaj stronę linkiem do przejęcia, na darmowym koncie.
React Router i głębokie linki
Z createBrowserRouter lub <BrowserRouter> adresy wyglądają jak /orders/42. Kliknięcie linku działa wszędzie, bo React Router zmienia stronę w przeglądarce. Bezpośrednie otwarcie tego adresu lub odświeżenie prosi serwer o /orders/42, a to nie jest plik. Tryb jednostronicowy odpowiada Twoim index.html, a React Router rysuje właściwą stronę.
<HashRouter>(adresy jak/#/orders/42) działa bez trybu jednostronicowego, bo serwer zawsze widzi tylko/. Trasy przeglądarkowe wyglądają lepiej i takich oczekują wyszukiwarki.- Tryb frameworka React Router z
ssr: falseteż buduje aplikację jednostronicową. Z ustawionymprerenderwymienione strony zapisują się jako osobne pliki HTML, a tryb jednostronicowy obsługuje resztę. - TanStack Router i wouter działają tak samo jak React Router.
Wdrożenie pokazuje wskazówkę, gdy znajdzie router w package.json, a tryb jednostronicowy jest wyłączony.
Przesiadka z Create React App
Zespół React wycofał Create React App w lutym 2025 i dla nowych aplikacji poleca framework lub Vite. Projekt CRA nadal da się wdrożyć: npx lobsite znajduje build/ i pomija public/, który CRA kopiuje do builda. Przejście na Vite zmienia kilka rzeczy po stronie hostingu:
- folder z buildem to teraz
dist/, wykrywany tak samo; - zmienne środowiskowe
REACT_APP_stają się zmiennymiVITE_, odczytywanymi przezimport.meta.env; index.htmlprzenosi się zpublic/do głównego folderu projektu.
Jeśli aplikacja potrzebuje renderowania na serwerze, zajrzyj zamiast tego do Next.js ze statycznym eksportem albo do hostingu uruchamiającego React na serwerze.
spa = true w lobsite.toml lub jeden przełącznik w panelu: głębokie linki otwierają aplikację, brakujące pliki nadal dają 404.
Pliki są przechowywane według hasha. Ponowne wdrożenie niezmienionej strony wgrywa 0 bajtów.
Podgląd przed publikacją. Wycofanie jednym kliknięciem, razem z przekierowaniami.
Każda strona dostaje adres *.lobsite.app z HTTPS od pierwszego wdrożenia.
Skieruj formularz na /_lobsite/forms/contact. Filtr spamu w zestawie.
Wdrożenie bez konta działa przez 6 godzin. Link do przejęcia pozwala je zatrzymać, za darmo.
Porównanie hostingów dla React
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Głębokie linki React Router | spa = true lub przełącznik w panelu |
Reguła w _redirects |
Rewrite w vercel.json |
Nie: HashRouter albo 404.html ze statusem 404 |
| Brakujące pliki skryptów po wdrożeniu | 404, jasny błąd | index.html aplikacji |
index.html aplikacji |
404 |
| Renderowanie na serwerze | Nie | Tak, z frameworkiem | Tak, z frameworkiem | Nie |
| Konto przed pierwszym wdrożeniem | Nie: 6 godzin online, potem zachowaj za darmo | Tak | Tak | Tak, i repozytorium |
| Formularze bez backendu | Tak, gdy strona jest na koncie | Tak | Nie | Nie |
| Własna domena | Tak, za darmo | Tak | Tak | Tak |
Aplikację React działającą w przeglądarce, czyli to, co buduje Vite, Lobsite wdraża jednym poleceniem, wgrywa tylko zmienione fragmenty i zachowuje URL podglądu dla każdego wdrożenia.
Najczęstsze pytania
Dlaczego odświeżenie strony React Router pokazuje „Not found”?
Ten adres istnieje tylko w aplikacji, więc serwer nie ma dla niego pliku. Włącz tryb jednostronicowy przez spa = true w lobsite.toml albo Aplikacja jednostronicowa w ustawieniach strony.
Czy mogę tu hostować projekt Create React App?
Tak. Uruchom npm run build i npx lobsite; folder build/ zostanie znaleziony i wdrożony. Włącz tryb jednostronicowy, jeśli używa React Router z trasami przeglądarkowymi.
Czy formularz w React może wysyłać zgłoszenia bez backendu?
Tak, jeśli formularz jest w zbudowanym HTML, np. w index.html, i wysyła na /_lobsite/forms/contact. Formularz rysowany wyłącznie przez React nie zostanie wykryty przy wdrożeniu, a jego zgłoszenia będą odrzucane. Dokumentacja formularzy wyjaśnia, jak trzymać formularz w HTML i wysyłać go przez fetch().
Czy potrzebuję Next.js, by hostować aplikację React?
Nie. Aplikacja React zbudowana przez Vite to zwykłe pliki i działa na każdym hostingu statycznym. Next.js służy do renderowania na serwerze lub prerenderowanych stron i ma własny statyczny eksport.