Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan TypeScript

Tutorial step‑by‑step ini memandu Anda menginstal Laravel 11 terbaru, mengonfigurasi Vite, menambahkan Breeze dengan TailwindCSS, mengamankan API dengan Sanctum, serta mengoptimalkan pengembangan menggunakan TypeScript.

1. Prerequisite

• PHP >= 8.2
• Composer 2.7+
• Node.js 20+ dan npm 10+
• Database (MySQL 8 atau PostgreSQL 15)

2. Instalasi Laravel 11

composer create-project laravel/laravel laravel-modern "^11.0"

Masuk ke folder proyek:

cd laravel-modern

2.1. Memastikan Environment

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

Sesuaikan .env dengan konfigurasi database Anda.

3. Setup Vite (alat bundler modern)

Laravel 11 sudah menyertakan Vite secara default, namun kita perlu menyesuaikan untuk TypeScript dan TailwindCSS.

3.1. Install dependencies

npm install -D vite laravel-vite-plugin@latest
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install -D typescript@latest @vitejs/plugin-vue@latest

3.2. Inisialisasi Tailwind

npx tailwindcss init -p

Ubah tailwind.config.js:

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

3.3. Konfigurasi Vite

Edit vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

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

3.4. Mengubah entry point

Rename resources/js/app.js menjadi app.ts dan tambahkan contoh:

import './bootstrap';
import '../css/app.css';

console.log('Laravel 11 + Vite + TypeScript ready');

4. Instalasi Laravel Breeze dengan Tailwind & Vue 3

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

Perintah di atas akan menambahkan scaffolding autentikasi berbasis Vue, Tailwind, dan Vite.

4.1. Migrasi Database

php artisan migrate

4.2. Compile assets

npm run dev

Anda sekarang dapat mengakses /register dan /login dengan UI modern.

5. Mengamankan API dengan Laravel Sanctum

5.1. Instalasi Sanctum

composer require laravel/sanctum

5.2. Publish konfigurasi & migration

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

5.3. Middleware

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

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

5.4. Contoh Route API yang dilindungi

use App\Http\Controllers\API\ProfileController;

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

5.5. Frontend: Mengambil token

Setelah login via Breeze, cookie laravel_session dan XSRF-TOKEN otomatis dikelola. Untuk request Axios:

import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/api/user/profile').then(r => console.log(r.data));

6. Best Practice Modern

• Environment segregation: gunakan .env.testing untuk CI dan .env.production untuk produksi.
• Static analysis: tambahkan phpstan dan psalm ke dalam pipeline CI.
• Cache config & routes di production: php artisan config:cache && php artisan route:cache.
• Queue & Jobs: gunakan driver redis dan konfigurasi supervisor untuk worker.
• Version control: commit hanya file vite.config.js, package.json, dan resources yang berubah; jangan commit node_modules atau vendor.
• Testing: gunakan PestPHP atau PHPUnit bersama Laravel Sanctum untuk menguji endpoint API.

7. Deploy ke Production (Laravel 11 + Vite)

# Build assets
npm run build

# Optimasi Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Set proper permissions
chown -R www-data:www-data storage bootstrap/cache

Upload seluruh proyek kecuali node_modules dan vendor, kemudian jalankan composer install --optimize-autoloader --no-dev di server.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang sepenuhnya modern: Vite untuk asset bundling, Breeze + Vue 3 untuk UI cepat, TailwindCSS untuk styling, serta Sanctum untuk proteksi API. Mengadopsi best practice seperti caching, static analysis, dan queueing memastikan aplikasi siap skala produksi dan mudah dipelihara.

---

Tutorial lengkap setup Laravel 11 terbaru dengan Vite, Breeze, Tailwind, TypeScript, dan Sanctum. Ikuti langkah demi langkah, konfigurasi, contoh kode, dan best practice modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend