React Uygulaması Netlify’ye Nasıl Deploy Edilir?

React Netlify deploy için güncel ve basit başlangıç, Vite ile oluşturulan React projesini production build’e dönüştürüp Git üzerinden Netlify’ye bağlamaktır. Vite projesinde tipik build komutu npm run build, publish directory ise dist olur. React Router kullanan tek sayfalık uygulamalarda ayrıca tüm client-side rotaları index. html dosyasına yönlendiren bir rewrite gerekir; aksi hâlde ana sayfa çalışırken /about gibi doğrudan istekler 404 verebilir.

Bu rehber yeni projelerde Vite’ı esas alıyor. Create React App hâlâ deploy edilebilir ancak onun build klasörü ve REACT_APP_ değişkenleri, Vite’ın dist klasörü ve VITE_ değişkenleriyle karıştırılmamalıdır.

Öne Çıkanlar

• Vite React uygulaması için yaygın Netlify ayarları npm run build ve dist dizinidir.
• src klasörü veya proje kökü manuel Drop’a yüklenmez; build edilmiş dist kullanılır.
• React Router history routing için /* /index.html 200 rewrite kuralı gerekir.
• VITE_ ile başlayan environment variables browser bundle’ına girer ve secret sayılmaz.
• Git bağlantısı otomatik deploy ve Deploy Preview sağlar; Drop manuel güncelleme gerektirir.
• Yeni @netlify/vite-plugin, Netlify platform primitive’lerini Vite dev server içinde yerel olarak emüle edebilir.

1. React Projesi Deploy Öncesi Nasıl Hazırlanır?

Yeni proje oluştururken Vite kullanılabilir:

``bash npm create vite@latest react-netlify-demo -- --template react cd react-netlify-demo npm install npm run dev ``

Netlify’nin 14 Ağustos 2026 güncellemeli Vite dokümanı Node. js 18. 14 veya üzerini minimum başlangıç olarak belirtiyor. Gerçek projede Vite ve diğer dependency’lerin kendi güncel Node gereksinimlerini de kontrol edin.

Production build alın:

``bash npm run build npm run preview ``

npm run preview, production çıktısını yerelde gözden geçirmek için yararlıdır; production sunucusunun tüm davranışını birebir taklit ettiği varsayılmamalıdır.

Deploy öncesi kontrol:

• npm ci veya kullandığınız package manager ile temiz kurulum başarılı mı?
• npm run build hatasız tamamlanıyor mu?
• dist/index.html oluşuyor mu?
• Browser console’da hata var mı?
• İç rotalar ve API origin’i doğru mu?
• .env ve gerçek erişim bilgileri Git’e eklenmemiş mi?

2. Vite İçin Doğru Build Command ve Publish Directory Nedir?

Standart Vite yapılandırmasında:

``text Build command: npm run build Publish directory: dist ``

Netlify repository’yi bağladığınızda bu değerleri önerebilir. Yine de package. json ve vite. config dosyalarını kontrol edin. Örneğin output değiştirilmişse:

```js import { defineConfig } from "vite"; import react from "@vitejs/plugin-react";

export default defineConfig({ plugins: [react()], build: { outDir: "public-app" } }); ```

Bu projede publish directory dist değil, public-app olur.

Base path de önemlidir. Uygulama kök domain’de çalışacaksa Vite’ın varsayılan / base değeri uygundur. Bir alt path altında yayınlanacaksa asset URL’lerini etkileyen base ayarı gerekebilir. Netlify custom domain’in köküne deploy edilen çoğu uygulamada gereksiz base değişikliği, CSS ve JavaScript 404’lerine yol açabilir.

3. GitHub Üzerinden React Uygulaması Nasıl Deploy Edilir?

Önce repository oluşturup kodu gönderin:

``bash git init git add . git commit -m "Initial React app" git branch -M main git remote add origin <repository-url> git push -u origin main ``

Netlify dashboard’da Git provider üzerinden yeni proje ekleyin, GitHub bağlantısını yetkilendirin ve repository’yi seçin. GitHub App’e yalnız gereken repository’leri açmak daha kontrollü bir yaklaşımdır.

Ayarları doğrulayın:

Ayar	Vite React örneği
Production branch	main
Build command	npm run build
Publish directory	dist
Base directory	Monorepo değilse boş

Deploy logunda Node sürümü, dependency kurulumu, build command ve publish directory görünmelidir. İlk başarılı deploy sonrasında netlify. app URL’sini gizli pencerede açın. Yeni kredi tabanlı projeler private başlayabildiğinden, link dış kullanıcıda açılmıyorsa production visibility ayarını kontrol edin.

Yeni bir branch ve pull request açtığınızda Deploy Preview üzerinden React değişikliğini merge öncesi inceleyebilirsiniz.

4. Netlify Drop ile Vite Çıktısı Nasıl Yayınlanır?

Git kullanmadan hızlı paylaşım için:

``bash npm install npm run build ``

Ardından yalnız dist klasörünü Netlify Drop alanına yükleyin. Şunları yüklemek yanlıştır:

• src klasörü,
• JSX kaynakları,
• node_modules,
• Henüz build edilmemiş proje kökü.

Drop, hazır dosyaları yayınlar; Git tabanlı CI build’i çalıştırmaz. Kod değiştiğinde tekrar build alıp yeni dist klasörünü manuel olarak yüklemeniz gerekir. Bu yöntem demo ve portföy için hızlıdır; ekip review’u ve sürekli deployment için Git daha uygundur.

5. React Router 404 Sorunu Nasıl Çözülür?

React Router ile /about route’u browser içinde çalışabilir. Fakat kullanıcı adresi doğrudan açtığında Netlify fiziksel /about dosyası arar. Dosya olmadığı için 404 döner. Çözüm, isteği URL’yi değiştirmeden index. html dosyasına rewrite etmektir.

Vite projesinde public/_redirects dosyası oluşturun:

``text /* /index.html 200 ``

Vite build sırasında public içeriğini dist klasörüne kopyalar. Build sonrasında şunu doğrulayın:

``text dist/_redirects ``

Aynı kural netlify. toml ile de yazılabilir:

``toml [[redirects]] from = "/*" to = "/index.html" status = 200 ``

Bu kural SPA içindir. Gerçek statik dosya, Function veya API route’larınız varsa özel kurallar geniş wildcard’dan önce gelmelidir. SSR framework projesine aynı fallback’i düşünmeden uygulamak framework routing’ini bozabilir.

Öncesi ve sonrası nasıl test edilir?

``bash curl -I https://example.netlify.app/about ``

Fallback öncesinde 404, sonrasında uygulama shell’i için 200 beklenebilir. Ancak HTTP 200 tek başına route’un doğru render edildiğini kanıtlamaz; browser’da React uygulamasının ilgili sayfayı gösterdiği de doğrulanmalıdır.

6. Environment Variables Nasıl Yönetilir?

Vite yalnız VITE_ önekli değişkenleri client koduna açar:

``env VITE_API_ORIGIN=https://api.example.com ``

Kodda:

``js const apiOrigin = import.meta.env.VITE_API_ORIGIN; ``

Bu değer deploy edilen JavaScript içinde görülebilir. Private API key veya database credential burada tutulmamalıdır. Secret gerektiren çağrı, Netlify Function gibi server-side bir katmandan yapılmalıdır.

Netlify dashboard’da production, Deploy Preview ve branch deploy için farklı değer tanımlayabilirsiniz:

``text Production: https://api.example.com Preview: https://sandbox-api.example.com ``

Değişken değiştikten sonra yeniden build/deploy gerekir. Eski deploy, oluşturulduğu andaki değeri taşımaya devam eder.

7. @netlify/vite-plugin Ne Zaman Kullanılır?

Netlify’nin güncel Vite plugin’i, Functions, Edge Functions, Blobs, Database, cache, redirects, headers, environment variables ve AI Gateway gibi platform primitive’lerini Vite dev server içinde emüle etmeyi amaçlar.

Kurulum:

``bash npm install @netlify/vite-plugin ``

vite. config. js örneği:

```js import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import netlify from "@netlify/vite-plugin";

export default defineConfig({ plugins: [react(), netlify()] }); ```

Yalnız statik React SPA deploy ediyorsanız plugin zorunlu değildir. Netlify primitive’lerini yerelde kullanıp agent veya geliştirici ortamını production davranışına yaklaştırmak istediğinizde değerlidir. Projenizdeki sürüm uyumluluğunu ve plugin’in destek durumunu yayın gününde doğrulayın.

8. Deploy Preview ve Production Kontrol Listesi

Pull request preview’da:

• Ana sayfa ve en az iki iç route’u doğrudan açın.
• Console ve Network 404’lerini kontrol edin.
• Sandbox API origin kullanıldığını doğrulayın.
• Mobile layout’u inceleyin.
• Preview visibility ayarını kontrol edin.
• Bundle’da yanlışlıkla hassas değer bulunmadığını doğrulayın.

Production’da:

• Custom domain ve HTTPS,
• Canonical/robots metadata,
• SPA fallback,
• Gerçek callback URL’leri,
• Analytics consent,
• Error monitoring,
• Rollback edilebilir deploy

kontrol edilmelidir.

9. Yaygın React Netlify Deploy Hataları

Page not found

Publish directory yanlış olabilir veya SPA fallback eksiktir. Logda hangi klasörün yayınlandığını ve dist/_redirects dosyasını kontrol edin.

Blank page

JavaScript runtime hatası, yanlış Vite base path veya asset 404’ü olabilir. Browser console ve Network sekmesine bakın.

process is not defined

Browser kodunda Node’a özgü process. env kullanılmış olabilir. Vite’ta client değerleri import. meta. env üzerinden okunur. Dependency’nin browser uyumluluğunu da kontrol edin.

Build’de module bulunamıyor

Yerelde büyük-küçük harf farkı tolere edilmiş olabilir. Import path ile dosya adı birebir aynı olmalıdır. Lockfile ve dependency’nin dependencies altında olduğundan emin olun.

Environment variable undefined

Önek yanlış, context’te değer yok veya değişiklikten sonra yeni deploy alınmamış olabilir. Private değeri sırf görünür olsun diye VITE_ ile açmayın.

CRA ile Vite ayarları karıştı

Vite: npm run build → dist, client öneki VITE_.

Create React App: react-scripts build → build, client öneki REACT_APP_.

Yeni bir Vite projesine eski CRA tutorial’ındaki değerleri taşımayın.

Zorunlu Test Matrisi

Test	Fallback öncesi	Fallback sonrası
/ açılışı	Ölçülmedi	Ölçülmedi
Client navigation ile /about	Ölçülmedi	Ölçülmedi
Doğrudan /about isteği	Ölçülmedi	Ölçülmedi
Browser render	Ölçülmedi	Ölçülmedi
Deploy logunda _redirects	Ölçülmedi	Ölçülmedi

> Editör notu — zorunlu özgün kanıt: Bu taslak hazırlanırken Vite + React Router projesi gerçek Netlify ortamına deploy edilmedi. Yayından önce kullanılan Node, Vite, React ve React Router sürümleri sabitlenmeli; fallback öncesi/sonrası curl status code, browser ekranı ve deploy logu kaydedilmelidir. Sonuçlar çalıştırılmadan tablo doldurulmamalıdır.

> Görsel notu: Vite klasör yapısı, Netlify build settings, public/_redirects, dist/_redirects ve /about öncesi/sonrası ekranlarından özgün seri hazırlanmalıdır.

> İç link editör notu: GitHub deploy, redirects ve environment variables yazıları yayımlandığında ilgili bölümlere bağlantı eklenmelidir.

Sık Sorulan Sorular

React uygulaması Netlify’de ücretsiz yayınlanabilir mi?

Kredi tabanlı Free plan kullanılabilir. Production deploy, bandwidth ve request tüketimini aylık 300 kredi sınırı içinde izlemek gerekir.

React için publish directory build mi, dist mi?

Vite için varsayılan dist; Create React App için build dizinidir. Projenizin gerçek build çıktısı esas alınmalıdır.

React Router için neden 200 rewrite kullanılıyor?

Server, fiziksel route dosyası yerine index. html döndürür; ardından client-side router URL’yi yorumlar. Bu yönlendirme URL’yi değiştirmez.

Netlify Drop React kaynak kodunu build eder mi?

Hayır. Vite ile önce build alın ve oluşan dist klasörünü yükleyin.

Netlify Vite plugin zorunlu mu?

Basit statik SPA deploy için zorunlu değildir. Netlify platform primitive’lerini yerel Vite dev server içinde kullanmak istediğinizde yararlıdır.

Kaynaklar

• Vite on Netlify
• React on Netlify
• Redirects overview
• Deploy overview
• Environment variables

Sonuç

React Netlify deploy için en güvenilir güncel yol, Vite production build’ini doğru dist klasörüyle yayınlamak ve React Router kullanılıyorsa SPA rewrite’ını ayrıca doğrulamaktır. Git bağlantısı otomatik deploy ve preview sağlarken Drop hızlı ama manuel bir seçenektir. Vite ile CRA ayarlarını ayırın, client environment values içine private bilgi koymayın ve ana sayfanın yanında doğrudan iç route isteğini de test edin.

React veya Vite projenizde bu adımları uygulamak için [ücretsiz Netlify hesabı oluşturabilirsiniz](https://join. netlify. com/wmkqymu1heo2). Bu bir iş ortaklığı bağlantısıdır; bağlantı üzerinden kayıt olmanız veya ücretli plana geçmeniz halinde Ortak Alan komisyon kazanabilir.