Install Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

1. Install Laravel Installer

Pertama, jalankan perintah berikut di terminal:

composer global require laravel/installer

Perintah ini akan menginstal Laravel Installer sebagai tool global (laravel), sehingga kamu bisa membuat project Laravel cukup dengan:

laravel new laravel-react-starter-kit

Keuntungan:

• Tidak perlu lagi composer create-project yang panjang
• Proses instalasi lebih cepat (karena caching)
• Bisa digunakan untuk membuat banyak project Laravel

2. Proses Instalasi Starter Kit

Saat menjalankan perintah di atas, kamu akan melihat beberapa opsi seperti berikut:

Starter Kit

Which starter kit would you like to install? [None]:
[none] None  
[react] React  
[vue] Vue  
[livewire] Livewire

> react

Pilih react untuk menginstal:

• React JS + Inertia.js
• Struktur folder resources/js/Pages untuk komponen React
• Scaffolding frontend siap pakai

Authentication Provider

Which authentication provider do you prefer? [Laravel's built-in authentication]:
[laravel] Laravel's built-in authentication  
[workos] WorkOS (Requires WorkOS account)

> laravel

Pilih autentikasi bawaan Laravel:

• Menggunakan Laravel Breeze
• Menyediakan file seperti Login.jsx, Register.jsx, dll
• Mendukung login, register, reset password

Testing Framework

Which testing framework do you prefer? [Pest]:
[0] Pest  
[1] PHPUnit

> 1

Pilih PHPUnit untuk menggunakan framework testing default Laravel.

NPM Install & Build

Would you like to run npm install and npm run build? (yes/no) [yes]:

> yes

ketik yes, maka Laravel akan otomatis:

• Menjalankan npm install untuk menginstal dependensi (react, inertia, tailwind, dll)
• Menjalankan npm run build pertama kali

Output Akhir

INFO  Application ready in [laravel-react-starter-kit]. You can start your local development using:

➜ cd laravel-react-starter-kit
➜ composer run dev

Struktur proyek yang kamu dapatkan:

• Laravel 12
• Inertia.js + React JS
• Tailwind CSS sudah siap pakai
• Autentikasi dengan Laravel Breeze
• Komponen React berada di resources/js/Pages

3. Menjalankan Aplikasi

Opsi A – Terminal Terpisah

Terminal 1 – Backend:

php artisan serve

Terminal 2 – Frontend (Vite):

npm run dev

Opsi B – Sekali Jalan

Gunakan perintah berikut agar kedua proses (serve dan vite) berjalan sekaligus dalam satu terminal:

composer run dev

Perintah ini otomatis menjalankan:

• php artisan serve
• vite (alias dari npm run dev)

Kapan Gunakan composer run dev

• Cocok saat development
• Tidak perlu buka dua terminal
• Praktis & efisien untuk preview dan coding langsung

Selanjutnya

Setelah project berhasil dibuat, langkah berikutnya adalah konfigurasi database dan menjalankan migrasi awal.