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

Tutorial step-by-step untuk menginstal Laravel 11 terbaru, mengintegrasikan Vite, Breeze, Sanctum, serta Tailwind CSS guna membangun aplikasi web modern dengan PHP Framework terkemuka.

1. Persiapan Lingkungan

1.1. Pastikan Sistem Memenuhi Requirement

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 dan npm/yarn
• Database (MySQL 8+, PostgreSQL, atau SQLite)

1.2. Install Composer dan Laravel Installer (opsional)

composer global require laravel/installer
export PATH="$HOME/.config/composer/vendor/bin:$PATH"

2. Membuat Proyek Laravel 11 Baru

laravel new blog --jetstream
# atau menggunakan Composer jika tidak pakai installer
composer create-project --prefer-dist laravel/laravel blog "11.*"

Masuk ke folder proyek:

cd blog

3. Mengonfigurasi Vite (Bundler Frontend Default)

3.1. Install Dependencies

npm install
# atau dengan Yarn
yarn

3.2. Sesuaikan vite.config.js

Laravel 11 sudah menyertakan konfigurasi dasar. Tambahkan alias jika diperlukan:

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

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

3.3. Jalankan Development Server

npm run dev
# atau yarn dev

Vite akan menyajikan asset dengan hot‑module‑replacement (HMR) untuk pengalaman pengembangan cepat.

4. Menambahkan Laravel Breeze (Starter Kit)

4.1. Install Breeze via Composer

composer require laravel/breeze --dev
php artisan breeze:install blade
# Pilih stack: blade, vue, react, or inertia
# Contoh menggunakan Blade + Tailwind

4.2. Install Frontend Dependencies

npm install && npm run dev

4.3. Migrasi Database

php artisan migrate

4.4. Verifikasi Instalasi

Buka http://localhost:8000/register dan pastikan halaman registrasi muncul dengan desain Tailwind.

5. Mengamankan API dengan Laravel Sanctum

5.1. Install Sanctum

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

5.2. Konfigurasi Middleware

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

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

5.3. Membuat Route API yang Terproteksi

// routes/api.php
use AppHttpControllersProfileController;

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

5.4. Mengambil Token di Frontend (Vue/React contoh)

axios.post('/login', {email, password})
  .then(response => {
    const token = response.data.token;
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  });

6. Menambahkan Tailwind CSS (Jika belum ada)

6.1. Install via npm

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

6.2. Konfigurasi tailwind.config.js

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

6.3. Import di resources/css/app.css

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

7. Best Practice Modern

• Environment Variables: Simpan semua konfigurasi sensitif di .env dan gunakan config:cache sebelum produksi.
• Docker: Gunakan Laravel Sail atau Docker Compose untuk memastikan konsistensi lingkungan.
• Code Quality: Tambahkan PHPStan atau Psalm untuk static analysis, serta Laravel Pint untuk coding style.
• Testing: Tulis Feature Test dengan Pest atau PHPUnit; jalankan php artisan test dalam CI pipeline.
• Deployment: Gunakan Laravel Forge, Vapor, atau GitHub Actions dengan step php artisan migrate --force dan npm run build untuk produksi.

8. Deploy ke Production

# Build assets
npm run build
# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
# Migrate dan seed
php artisan migrate --force
# Set proper permissions
chmod -R 775 storage bootstrap/cache

Setelah server web (NGINX/Apache) diarahkan ke public/, aplikasi siap melayani request.

Dengan mengikuti langkah-langkah di atas, Anda kini memiliki proyek Laravel 11 yang terstruktur dengan best practice modern: Vite untuk asset bundling, Breeze sebagai starter kit UI, Sanctum untuk API security, serta Tailwind CSS untuk tampilan responsif. Pendekatan ini memaksimalkan kecepatan development, keamanan, dan skalabilitas, menjadikan aplikasi siap produksi dalam ekosistem Laravel terbaru.

---

Panduan step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind. Tutorial lengkap instalasi, konfigurasi, contoh kode, dan best practice modern untuk PHP Framework terbaru.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend