Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern (Vite, Breeze, Sanctum, TailwindCSS)

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite, menambahkan starter kit Breeze, mengamankan API dengan Sanctum, serta mengoptimalkan front‑end menggunakan TailwindCSS.

1. Prasyarat

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

2. Instalasi Laravel 11

composer create-project laravel/laravel blog "11.*" --prefer-dist

Masuk ke direktori proyek:

cd blog

Penjelasan

Perintah di atas mendownload versi stabil Laravel 11 serta semua dependensi dasar.

3. Setup Vite (Asset Bundler bawaan)

# Pastikan Node dependencies terinstall n npm install
# Jalankan Vite dalam mode development
npm run dev

Vite sudah dikonfigurasi secara default pada Laravel 11 (file vite.config.js). Jika ingin menambah alias:

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Best Practice

• Jangan commit folder node_modules ke repo.
• Gunakan npm run build saat produksi untuk menghasilkan file ter‑minify.

4. Instalasi Laravel Breeze (Starter Kit)

composer require laravel/breeze --dev
php artisan breeze:install vue
# atau gunakan blade: php artisan breeze:install blade
npm install && npm run dev
php artisan migrate

Breeze menyediakan autentikasi dasar, layout blade (atau Vue) dan komponen TailwindCSS.

Penjelasan tiap perintah

• composer require menambahkan paket Breeze.
• php artisan breeze:install vue men-setup stack Vue 3 + Inertia (pilihan). Jika hanya Blade, gunakan blade.
• npm install && npm run dev meng‑compile assets dengan Vite.
• php artisan migrate membuat tabel pengguna.

5. Mengamankan API dengan Laravel Sanctum

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada api middleware group (file app/Http/Kernel.php).

protected $middlewareGroups = [
    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

Contoh Endpoint API yang Dilindungi

// routes/api.php
use AppHttpControllersApi\PostController;

Route::middleware('auth:sanctum')->group(function () {
    Route::apiResource('posts', PostController::class);
});

Client‑Side (Vue) – Menggunakan Token

import axios from 'axios';

axios.get('/sanctum/csrf-cookie').then(() => {
    axios.post('/login', {email, password}).then(res => {
        // token otomatis tersimpan via cookie
    });
});

6. Integrasi TailwindCSS (Sudah termasuk Breeze)

Breeze sudah meng‑install Tailwind. Jika ingin menambah konfigurasi:

# Install optional plugins
npm install -D @tailwindcss/forms @tailwindcss/typography

# Edit tailwind.config.js
module.exports = {
  content: ['./resources/**/*.blade.php', './resources/**/*.vue', './resources/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Best Practice Tailwind

• Gunakan @apply dalam file CSS untuk utility yang kompleks.
• Aktifkan purge (sekarang content) untuk mengurangi ukuran file produksi.

7. Optimasi Produksi

# Build assets
npm run build

# Cache config & routes
php artisan config:cache
php artisan route:cache
php artisan view:cache

Pastikan .env memiliki APP_ENV=production dan APP_DEBUG=false.

8. Deploy ke Server (contoh menggunakan Laravel Forge)

1. Buat site baru, pilih PHP 8.2.
2. Clone repo, jalankan composer install --optimize-autoloader --no-dev.
3. Set environment variables di Forge.
4. Jalankan php artisan migrate --force dan npm ci && npm run build.
5. Enable queue workers jika menggunakan job.

Catatan Keamanan

• Gunakan HTTPS dan set SESSION_SECURE_COOKIE=true.
• Rotasi APP_KEY hanya sekali setelah instalasi.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang modern, ter‑bundle dengan Vite, dilengkapi autentikasi cepat lewat Breeze, serta API yang aman menggunakan Sanctum. Praktik terbaik seperti caching, asset minification, dan konfigurasi produksi memastikan aplikasi siap skala dan aman untuk dipublikasikan.

---

Tutorial lengkap setup Laravel 11 terbaru menggunakan Vite, Breeze, Sanctum, dan TailwindCSS. Panduan step‑by‑step, konfigurasi, contoh kode, dan best practice modern untuk PHP Framework dalam pengembangan Web.

Laravel,PHP Framework,Web Development,Vite,Breeze,Sanctum,TailwindCSS

#Laravel #LaravelIndonesia #PHP #WebDev #Backend