Panduan Lengkap Setup Laravel 11 dengan Praktik Modern (Vite, Breeze, Sanctum, dan TypeScript)

Pelajari cara menyiapkan proyek Laravel 11 terbaru di tahun 2026 dengan stack modern: Vite untuk asset bundling, Breeze sebagai starter kit, Sanctum untuk API authentication, serta integrasi TypeScript dan ESLint.

1. Prasyarat

• PHP 8.3 atau lebih tinggi
• Composer 2.7+
• Node.js 20.x dan npm 10.x
• Database MySQL 8.x atau PostgreSQL 16

2. Instalasi Laravel 11

composer create-project laravel/laravel myapp "11.*"

Masuk folder project:

cd myapp

2.1. Konfigurasi .env

Salin file contoh dan sesuaikan koneksi database:

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

Edit .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myapp_db
DB_USERNAME=root
DB_PASSWORD=

3. Mengganti Mix dengan Vite

Laravel 11 sudah menyertakan Vite secara default, cukup instal dependensi:

npm install
npm run dev

Pastikan vite.config.js berisi plugin Laravel:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [laravel(['resources/js/app.ts', 'resources/css/app.css'])],
});

3.1. Menambahkan TypeScript

npm install -D typescript @types/node
npx tsc --init --allowJs false --esModuleInterop true

Ubah resources/js/app.js menjadi app.ts dan perbarui referensi di vite.config.js.

4. Instalasi Breeze (Starter Kit) dengan Livewire atau Inertia

Untuk stack Blade + Livewire:

composer require laravel/breeze --dev
php artisan breeze:install livewire
npm run dev

Atau untuk React + Inertia:

php artisan breeze:install vue
npm run dev

4.1. Migrasi Database

php artisan migrate

5. Menambahkan Laravel Sanctum untuk API Authentication

composer require laravel/sanctum

Publish konfigurasi dan migrasi:

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

5.1. Konfigurasi Guard API

Di config/auth.php ubah guard api:

'api' => [
    'driver' => 'sanctum',
    'provider' => 'users',
    'hash' => false,
],

5.2. Middleware

Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada grup api di app/Http/Kernel.php untuk SPA:

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

6. Contoh Endpoint API Terproteksi

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\ProfileController;

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/user/profile', [ProfileController::class, 'show']);
});

Controller sederhana:

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class ProfileController extends Controller
{
    public function show(Request $request)
    {
        return response()->json($request->user());
    }
}

7. Best Practice Modern

• Environment Isolation: Gunakan .env.testing untuk CI/CD.
• Typed Properties & Union Types: Manfaatkan fitur PHP 8.3 di model dan service.
• Service Container Bindings: Registrasikan class di AppServiceProvider dengan singleton bila diperlukan.
• Static Analysis: Install phpstan atau psalm untuk kualitas kode.
• Linting Frontend: Tambahkan eslint + prettier pada pipeline npm.

  npm install -D eslint prettier eslint-plugin-vue
  npx eslint --init

• Testing: Gunakan PestPHP untuk feature test yang expressive.

8. Deploy ke Production

1. Set environment variables di server (APP_ENV=production, CACHE_DRIVER=redis, etc).
2. Jalankan composer install --optimize-autoloader --no-dev.
3. Build assets: npm ci && npm run build.
4. Migrasi: php artisan migrate --force.
5. Cache config & routes: php artisan config:cache && php artisan route:cache.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki aplikasi Laravel 11 yang modern, scalable, dan siap produksi. Kombinasi Vite, Breeze, Sanctum, TypeScript, serta best practice seperti static analysis dan CI/CD menjamin kode yang bersih, aman, dan mudah dipelihara di era 2026.

---

Tutorial step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, TypeScript, dan best practice modern untuk pengembangan web 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend