Modern web development sıklıkla iki dünya arasında seçim yapmak gibi görünür:
- Laravel gibi Backend framework’leri
- React gibi Frontend framework’leri
Peki ya bunları tamamen bir API katmanı oluşturmadan veya iki ayrı uygulama yönetmeden birleştirmek mümkün olsaydı? İşte bu rehberde tam olarak bunu göstereceğiz.
Aşağıdaki bileşenleri kullanarak modern bir Laravel uygulaması geliştireceğiz:
- Laravel (backend mantığı)
- Inertia.js (backend ve frontend arasında köprü)
- React (arayüzün render edilmesi)
- Tailwind CSS v4
- shadcn/ui (güzel, özelleştirilebilir bileşenler)
Yeni başlayan biriyseniz endişelenmeyin. Adım adım gideceğiz ve her parçanın ne yaptığını ve neden gerekli olduğunu açıklayacağız.
Bu öğreticinin sonunda çalışan bir Laravel + React + shadcn kurulumu elde etmiş olacaksınız.
Ne İnşa Ediyoruz (Yeni Başlayanlar İçin Açıklama)
Komutlara geçmeden önce, mimariyi basit terimlerle anlamalıyız.
Normalde Laravel, Blade şablonlarını sunucuda işler.
Ancak Inertia.js ile Laravel, ayrı bir API oluşturmadan React frontend’ine veri gönderir. Yine de Laravel’de rota tanımlarsınız, ancak React arayüzü render etmeyi üstlenir.
shadcn/ui ise bize Tailwind CSS üzerinden yüksek kaliteli UI bileşenleri sunar.
Akış şöyle görünür:
Laravel Route → Inertia → React Page → shadcn Component
Böylece her şeyi tek bir projede tutarken modern bir frontend’e sahip oluruz.
Elimizde Bulunması Gerekenler:
- PHP 8.1+
- Composer
- Node.js 18+
- npm
- Laravel ve React hakkında temel bilgi
Laravel kurulumu için talimatlar gerekiyorsa, resmi dökümana başvurun:
https://laravel.com/docs/installation
Yeni bir Laravel uygulaması ile başlayalım:
composer create-project laravel/laravel laravel-shadcnui
cd shadcn-laravel
Node bağımlılıklarını kurun:
npm install
Bu aşamada, Vite desteği ile temiz bir Laravel projemiz oldu.
*Inertia’yı yükleyin (Laravel Yükü)
*
Şimdi, backend’de Inertia’yı yükleyin:
composer require inertiajs/inertia-laravel
Middleware’i oluşturun:
php artisan inertia:middleware
Bu, aşağıdaki dosyayı oluşturur:
app/Http/Middleware/HandleInertiaRequests.php
Önemli: php artisan install:react Neden Hata Veriyor
Kodlarınızı çalıştırmayı denerseniz:
php artisan install:react
Bir hata alacaksınız çünkü bu komut Laravel’de mevcut değil.
Bu nedenle bir hata görüyorsunuz.
Laravel, React’i otomatik olarak yüklemez. Frontend tarafında npm kullanarak React’i manuel olarak yüklemelisiniz.
<h2>Inertia Middleware'ini Kaydetme</h2>
<p>Laravel 11+ yapı değiştiği için Kernel.php kaldırılmıştır. Bu nedenle middleware kaydı, sürümünüze bağlı olarak farklılık gösterir.</p>
<p><strong>Laravel 10 ve Daha Eski</strong><br/>Düzenle:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>app/Http/Kernel.phpŞu satırı ekleyin:
'web' => [
...
\App\Http\Middleware\HandleInertiaRequests::class,
],
web middleware grubunun içine.
Laravel 11 / 12
Düzenle:
bootstrap/app.php
Aşağıdaki satırı bul:
->withMiddleware(function (Middleware $middleware) {
//
})
Middleware bölümünü güncelleyin:
use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Configuration\Middleware;
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
Artık React + Vite’yi yükleyin:
npm install react react-dom
npm install @vitejs/plugin-react --save-dev
Tailwind CSS v4’ü Yükleyin
Vite eklentisi kullanarak Tailwind v4’ü yükleyin:
npm i tailwindcss @tailwindcss/vite
Tailwind v4, eski PostCSS yönteminin yerine Vite eklenti yaklaşımını kullanır.
vite.config.js’yi Güncelleyin:
Aşağıdaki gibi göründüğünden emin olun:
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, <span class="dl>'resources/js'),
},
},
plugins: [
laravel({
input: [<span class="dl>'resources/css/app.css<span class="dl>', <span class="dl>'resources/js/app.jsx<span class="dl>'],
refresh: true,
}),
tailwindcss(),
react(),
],
})
Eski PostCSS Konfigürasyonunu (Varsa) Kaldırın
Önceki bir Tailwind v3 öğreticisini takip ettiyseniz ve aşağıdakileri oluşturduysanız:
postcss.config.js- autoprefixer ayarları
Bunları kaldırın, aksi takdirde PostCSS eklentilerine ihtiyacınız olmadığı sürece bırakmayın.
Tailwind v4, eski PostCSS yapılandırmasını kullanmak hatalara neden olabilir.
Şimdi, React’i yüklemek için Inertia’yı yükleyin:
npm i @inertiajs/react
Oluşturun:
resources/views/app.blade.php
lang="en">
charset="utf-8" />
name="viewport" content="width=device-width, initial-scale=1" />
@vite(['resources/css/app.css', 'resources/js/app.jsx'])
@inertiaHead
@inertia
eğer config/inertia.php mevcut değilse, yayınlayın:
php artisan vendor:publish --provider="Inertia\ServiceProvider"
Açın: routes/web.php
use Inertia\Inertia;
Route::get("https://dev.to/", function () {
return Inertia::render('Home');
});
resources/js/app.jsx
import '../css/app.css'
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob(<span class="dl>'./Pages/*/.jsx<span class="dl>', { eager: true })
return pages[./Pages/</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">.jsx]
},
setup({ el, App, props }) {
createRoot(el).render(App {...props} />)
},
})
resources/js/Pages/Home.jsx
export default function Home() {
return div className="p-6">Hello Inertia + Reactdiv>
}
Resmi kılavuz:
https://ui.shadcn.com/docs/installation/vite
Başlat:
npx shadcn@latest init
Buton ekleyin:
npx shadcn@latest add button
Home.jsx dosyasını güncelleyin:
import { Button } from "@/components/ui/button"
export default function Home() {
return (
div className="p-6 text-center bg-amber-50">
span className="mr-2">Hello, ben Laravel ile birlikte Vite ve React'te shadcn ui'yımspan>
Button>Click meButton>
div>
)
}
Artık Laravel içinde shadcn/ui kullanıyorsunuz.
package.json:
"scripts": {
"watch": "vite build --watch"
}
Çalıştırın:
npm run watch
Bu, değişiklikleri manuel olarak yeniden inşa etmeden görmenizi sağlar.
Projeyi çalıştırın:
npm install
npm run warch
php artisan serve
Şimdi aşağıdaki URL’yi ziyaret edin:
http://127.0.0.1:8000
shadcn Butonunuzun bir Laravel uygulaması içinde render edildiğini görmelisiniz.
Manuel kurulumu atlamak ve tamamlanmış projeye doğrudan ulaşmak istiyorsanız, repository’i klonlayabilirsiniz:
git clone https://github.com/smitbhalodiya/laravel-shadcnui.git
cd laravel-shadcnui
composer install
npm install
npm run dev
php artisan serve
Repository bağlantısı:
https://github.com/smitbhalodiya/laravel-shadcnui
Bu repository, bu makalede açıklanan çalışan yapılandırmayı içermektedir.
Son Proje Yapısı
resources/
├── js/
│ ├── app.jsx
│ ├── Pages/
│ └── components/ui/
├── css/app.css
└── views/app.blade.php
Shadcn Studio’yu da kontrol edebilirsiniz. Laravel ile beraber Inertia React kullanarak bunu kullanabilirsiniz. 700+ hazır Shadcn Blocks, 1000+ Shadcn Bileşeni varyantlarıyla birlikte geliyor. Ayrıca Shadcn Builder, Shadcn Şablonları, AI MCP inşaat aracı ve Figma tasarım sistemi sunuyor.
shadcn/ui’yi Laravel’e entegre etmek, rolleri anladığınızda basit hale gelir:
- Laravel backend mantığını yönetir.
- Inertia backend ve frontend’i bağlar.
- React arayüzü render eder.
- Tailwind her şeyi stilize eder.
- shadcn şık bileşenler sunar.
Laravel ve React’i ayrı dünyalar olarak görmek yerine, Inertia onların doğal bir şekilde çalışmasını sağlar.
Bu yaklaşım size:
- Tam backend kontrolü
- Modern React UI
- Temiz, özelleştirilebilir bileşenler
- Ağır kullanıcı arayüzü bağımlılıkları yok
- Harika bir geliştirici deneyimi
Bundan sonra, bu kurulumu şunlarla genişletebilirsiniz:
- Kimlik doğrulama (Laravel Breeze + React)
- Tasarım sistemleri
- Shadcn ile tema yönetimi
- Tam SaaS panelleri
Şimdi modern Laravel uygulamalarınız için üretim hazır bir temeliniz var.
