Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern (Vite, Breeze, Sanctum, dan Tailwind CSS)

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel versi terbaru, mengkonfigurasi Vite, Breeze, Sanctum, dan Tailwind CSS secara optimal untuk proyek produksi di tahun 2026.

1. Prasyarat

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 LTS & npm atau Yarn
• Database MySQL/PostgreSQL

2. Instalasi Laravel 11

composer create-project laravel/laravel my-app "11.*"

Masuk ke direktori project:

cd my-app

2.1. Konfigurasi .env

Salin contoh dan sesuaikan koneksi database serta APP_KEY:

cp .env.example .env
php artisan key:generate

3. Integrasi Vite & Tailwind CSS

Laravel 11 telah menggunakan Vite secara default. Install dependensi front‑end:

npm install

Tambahkan Tailwind CSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Edit tailwind.config.js:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Tambahkan directives di resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.1. Compile Asset

npm run dev   // untuk development
npm run build // untuk production

4. Instalasi Laravel Breeze (Starter Kit)

composer require laravel/breeze --dev
php artisan breeze:install vue

Perintah di atas menginstal Breeze dengan stack Vue 3 + Vite. Pilihan lain: blade, react, atau react dapat dipilih sesuai kebutuhan.

4.1. Migrasi Auth

php artisan migrate

4.2. Jalankan kembali assets

npm install && npm run dev

5. Menambahkan Laravel Sanctum untuk API Authentication

composer require laravel/sanctum

Publikasikan konfigurasi dan migrasi:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

5.1. Konfigurasi Guard

Tambahkan guard sanctum di config/auth.php:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'api' => [
        'driver' => 'sanctum',
        'provider' => 'users',
        'hash' => false,
    ],
];

5.2. Middleware CSRF untuk SPA

Di app/Http/Kernel.php pastikan EnsureFrontendRequestsAreStateful::class berada pada grup api:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

5.3. Contoh Endpoint API

use App\Models\User;
use Illuminate\Http\Request;
use Laravel\Sanctum\HasApiTokens;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

6. Best Practice Modern

• Environment Segregation: Gunakan file .env.production dan load via phpdotenv pada deployment.
• Cache Config & Routes: php artisan config:cache & php artisan route:cache setelah deployment.
• Static Asset Versioning: Vite sudah menambahkan hash ke nama file, pastikan mix-manifest.json atau vite-manifest.json di‑publish via CDN.
• Database Migrations: Selalu gunakan --step untuk rollback terkontrol.
• Testing: Implementasikan PHPUnit & Pest, contoh: php artisan test.
• Code Style: Terapkan PHP CS Fixer & ESLint untuk konsistensi.

7. Deploy ke Production (Contoh dengan Laravel Vapor)

1. Instal Vapor CLI: composer require laravel/vapor-cli
2. Login: vapor login
3. Buat environment: vapor env create production
4. Deploy: vapor deploy production

Jika menggunakan server tradisional, pastikan directory storage dan bootstrap/cache writable, serta nginx config mengarahkan semua request ke public/index.php.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki fondasi Laravel 11 yang modern, cepat, dan aman. Kombinasi Vite, Breeze, Sanctum, dan Tailwind CSS memberikan workflow developer yang produktif, sementara best practice memastikan aplikasi siap skala di lingkungan produksi tahun 2026.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Langkah demi langkah, konfigurasi, contoh kode, dan best practice modern untuk proyek 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend