React uygulaması: Vite, React Router, derin bağlantılar

Q: Burada bir Create React App projesi barındırabilir miyim?

Evet. npm run build ve npx lobsite çalıştırın; build/ klasörü bulunur ve deploy edilir. Tarayıcı rotalarıyla React Router kullanıyorsa tek sayfa modunu açın.

Q: Bir React formu backend olmadan gönderim yapabilir mi?

Evet, form derlenmiş HTML'de, örneğin index.html içinde duruyorsa ve /_lobsite/forms/contact adresine gönderiyorsa. Yalnızca React'in çizdiği bir form deploy sırasında bulunmaz ve gönderimleri reddedilir. Form belgeleri, formu HTML'de tutup fetch() ile göndermeyi anlatır.

Bugün çoğu React uygulaması Vite ile statik dosyalardan oluşan bir klasöre derlenir: bir index.html ve her sayfayı çizen JavaScript. Lobsite bu klasörü barındırır. npm run build, ardından npx lobsite çalıştırın; uygulama HTTPS'li bir *.lobsite.app adresinde yayına girer. Tek sayfa modu açıldığında React Router derin bağlantıları çalışır.

Nasıl çalışır

Uygulamayı npm run build ile derleyin. Bir Vite projesi dist/, eski bir Create React App projesi build/ yazar.
Projede npx lobsite çalıştırın. Derleme klasörünü bulur ve deploy eder. İlk deploy hesap gerektirmez ve 6 saat sürer.
React Router için tek sayfa modunu açın: lobsite.toml içinde spa = true ya da sitenin ayarlarında Tek sayfalı uygulama. Siteyi sahiplenme bağlantısıyla ücretsiz bir hesapta koruyun.

React Router ve derin bağlantılar

createBrowserRouter veya <BrowserRouter> ile adresler /orders/42 gibi görünür. Bir bağlantıya tıklamak her yerde çalışır, çünkü React Router sayfayı tarayıcıda değiştirir. O adresi doğrudan açmak veya yenilemek ise sunucudan dosya olmayan /orders/42 adresini ister. Tek sayfa modu buna index.html dosyanızla yanıt verir ve React Router doğru sayfayı çizer.

<HashRouter> (/#/orders/42 gibi adresler) tek sayfa modu olmadan çalışır, çünkü sunucu her zaman yalnızca / görür. Tarayıcı rotaları daha iyi görünür ve arama motorlarının beklediği budur.
React Router'ın framework modu ssr: false ile de tek sayfalı bir uygulama derler. prerender ayarlıysa listelenen sayfalar kendi HTML dosyaları olarak yazılır, geri kalanını tek sayfa modu karşılar.
TanStack Router ve wouter, React Router ile aynı şekilde çalışır.

Deploy, package.json içinde bir yönlendirici bulduğunda ve tek sayfa modu kapalıysa bir ipucu gösterir.

Create React App'ten geçiş

React ekibi Şubat 2025'te Create React App'i kullanımdan kaldırdı ve yeni uygulamalar için bir framework veya Vite öneriyor. Bir CRA projesi yine de deploy edilebilir: npx lobsite build/ klasörünü bulur ve CRA'nın derlemeye kopyaladığı public/ klasörünü atlar. Vite'a geçmek barındırma tarafında birkaç şeyi değiştirir:

derleme klasörü dist/ olur ve aynı şekilde bulunur;
REACT_APP_ ortam değişkenleri, import.meta.env ile okunan VITE_ değişkenlerine dönüşür;
index.html, public/ klasöründen projenin üst klasörüne taşınır.

Uygulama sunucu tarafı oluşturma gerektiriyorsa bunun yerine statik export ile Next.js sayfasına ya da React'i sunucuda çalıştıran bir barındırmaya bakın.

Tek sayfalı uygulamalar

lobsite.toml'da spa = true ya da paneldeki tek bir anahtar: derin bağlantılar uygulamanızı açar, eksik dosyalar yine 404 verir.

Yalnızca değişen dosyalar yüklenir

Dosyalar hash'lerine göre saklanır. Değişmemiş bir siteyi yeniden deploy etmek 0 bayt yükler.

Her deploy'un bir URL'si olur

Yayına almadan önce önizleyin. Yönlendirmeler dahil tek tıkla geri alın.

Her yerde HTTPS

Her site ilk deploy'dan itibaren HTTPS'li bir *.lobsite.app adresi alır.

Doğrudan çalışan formlar

Bir formu /_lobsite/forms/contact adresine yönlendirin. Spam filtresi dahil.

Denemek için hesap gerekmez

Hesapsız bir deploy 6 saat yayında kalır. Sahiplenme bağlantısı onu ücretsiz olarak korur.

React barındırma hizmetleri karşılaştırması

	Lobsite	Netlify	Vercel	GitHub Pages
React Router derin bağlantıları	`spa = true` veya paneldeki bir anahtar	Bir `_redirects` kuralı	`vercel.json` içinde bir rewrite	Hayır: `HashRouter` veya 404 durumuyla sunulan `404.html`
Deploy sonrası eksik betik dosyaları	404, net bir hata	Uygulamanın `index.html` dosyası	Uygulamanın `index.html` dosyası	404
Sunucu tarafı oluşturma	Hayır	Evet, bir framework ile	Evet, bir framework ile	Hayır
İlk deploy'dan önce hesap	Hayır: 6 saat yayında, sonra ücretsiz koruyun	Evet	Evet	Evet, ve bir depo
Backend'siz formlar	Evet, site bir hesaptayken	Evet	Hayır	Hayır
Özel alan adı	Evet, ücretsiz	Evet	Evet	Evet

Tarayıcıda çalışan bir React uygulamasını (Vite'ın derlediği tam olarak budur) Lobsite tek komutla deploy eder, yalnızca değişen parçaları yükler ve her deploy için bir önizleme URL'si tutar.

Sık sorulan sorular

Bir React Router sayfasını yenilemek neden "Not found" gösteriyor?

Adres yalnızca uygulamanın içinde var, bu yüzden sunucuda onun için bir dosya yok. lobsite.toml içinde spa = true ile ya da sitenin ayarlarında Tek sayfalı uygulama ile tek sayfa modunu açın.

Burada bir Create React App projesi barındırabilir miyim?

Evet. npm run build ve npx lobsite çalıştırın; build/ klasörü bulunur ve deploy edilir. Tarayıcı rotalarıyla React Router kullanıyorsa tek sayfa modunu açın.

Bir React formu backend olmadan gönderim yapabilir mi?

Evet, form derlenmiş HTML'de, örneğin index.html içinde duruyorsa ve /_lobsite/forms/contact adresine gönderiyorsa. Yalnızca React'in çizdiği bir form deploy sırasında bulunmaz ve gönderimleri reddedilir. Form belgeleri, formu HTML'de tutup fetch() ile göndermeyi anlatır.

React uygulaması barındırmak için Next.js gerekir mi?

Hayır. Vite ile derlenmiş bir React uygulaması düz dosyalardan oluşur ve her statik barındırmada çalışır. Next.js sunucu tarafı oluşturma veya önceden oluşturulmuş sayfalar içindir ve kendi statik export özelliği vardır.