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

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru, mengonfigurasi Vite, Breeze, Sanctum, serta Tailwind CSS sehingga proyek siap produksi dengan standar keamanan dan performa terkini.

1. Prasyarat

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

2. Instalasi Laravel 11

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

Masuk ke direktori proyek:

cd my-app

2.1. Validasi Instalasi

php artisan --version

Output harus menampilkan Laravel Framework 11.x.x.

3. Setup Frontend dengan Vite & Tailwind CSS

3.1. Install dependensi npm

npm install

3.2. Tambahkan Tailwind CSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Inisialisasi konfigurasi Tailwind:

npx tailwindcss init -p

Ubah tailwind.config.js:

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

Update resources/css/app.css:

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

3.3. Konfigurasi Vite

File vite.config.js yang di‑generate Laravel sudah siap. Pastikan ada plugin Laravel Vite:

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,
        }),
    ],
});

3.4. Jalankan dev server

npm run dev

Vite akan meng‑compile asset dan hot‑reload.

4. Instalasi Laravel Breeze (Starter Kit)

composer require laravel/breeze --dev

Generate scaffolding dengan Tailwind & Vite:

php artisan breeze:install vue

Jika ingin menggunakan Blade saja, ganti vue dengan blade.

Install kembali npm dependencies yang diperlukan Breeze:

npm install && npm run dev

5. Menambahkan Laravel Sanctum untuk API Authentication

5.1. Install Sanctum

composer require laravel/sanctum

5.2. Publish konfigurasi & migrasi

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

5.3. Konfigurasi Middleware

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

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

5.4. Menggunakan Token Personal Access

Contoh route untuk login API:

use Illuminate\Http\Request;
use App\Models\User;

Route::post('/api/login', function (Request $request) {
    $user = User::where('email', $request->email)->first();
    if (! $user || ! Hash::check($request->password, $user->password)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }
    $token = $user->createToken('api-token')->plainTextToken;
    return response()->json(['token' => $token]);
});

5.5. Melindungi Route API

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

6. Best Practice Modern

• Environment Variables: Simpan kunci rahasia di .env (APP_KEY, SANCTUM_STATEFUL_DOMAINS, SESSION_DOMAIN).
• Cache Config & Routes: Pada production jalankan php artisan config:cache dan php artisan route:cache.
• Optimized Autoload: composer install --optimize-autoloader --no-dev.
• HTTPS & Secure Cookies: Set SESSION_SECURE_COOKIE=true dan SANCTUM_COOKIE_SECURE=true di .env.
• Static Asset Versioning: Vite sudah menambahkan hash pada nama file, cukup pastikan mix() diganti dengan vite() di Blade.
• Testing: Gunakan Pest atau PHPUnit; contoh: php artisan test.

7. Deploy ke Production (Contoh di Laravel Forge/VPS)

1. Clone repo, git pull
2. Install PHP dependencies: composer install --no-dev --optimize-autoloader
3. Install Node assets: npm ci && npm run build
4. Set permission: chmod -R 775 storage bootstrap/cache
5. Jalankan migrasi & cache: php artisan migrate --force && php artisan config:cache && php artisan route:cache && php artisan view:cache
6. Restart queue & supervisor jika ada.

Setelah semua langkah selesai, aplikasi Laravel 11 siap melayani traffic dengan stack modern.

Dengan mengikuti tutorial ini, Anda berhasil men-setup Laravel 11 menggunakan Vite, Tailwind, Breeze, dan Sanctum—semua dalam satu rangkaian yang mengikuti best practice 2026. Stack modern ini memberikan kecepatan pengembangan, keamanan API, dan performa front‑end yang optimal, siap untuk skala produksi maupun proyek starter.

---

Panduan lengkap instalasi Laravel 11 dengan Vite, Breeze, Sanctum, Tailwind CSS, dan best practice modern untuk pengembangan web 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend