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

Tutorial step-by-step untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, serta mengoptimalkan proyek dengan TailwindCSS dan best practice terkini.

1. Persiapan Lingkungan

Pastikan sistem Anda sudah terpasang PHP 8.3+, Composer 2.x, Node.js 20+ dan Git. Verifikasi versi dengan perintah:

php -v
composer -V
node -v
git --version

Instalasi Dependensi Sistem

• Ubuntu/Debian: sudo apt install php8.3 php8.3-mbstring php8.3-xml composer nodejs npm
• MacOS (Homebrew): brew install php composer node

2. Membuat Proyek Laravel 11 Baru

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

Masuk ke direktori proyek:

cd blog

Setup Git

git init
git add .
git commit -m "Initial commit - Laravel 11 starter"

3. Mengganti Mix dengan Vite (Default di Laravel 11)

Laravel 11 sudah menyertakan Vite secara default. Anda cukup menginstall dependensi Node:

npm install

Jalankan development server:

npm run dev

Konfigurasi Vite (vite.config.js)

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

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

4. Menambahkan Laravel Breeze dengan TailwindCSS

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

Perintah di atas menginstal scaffolding Breeze menggunakan Vue.js dan TailwindCSS, cocok untuk SPA atau aplikasi tradisional.

Opsional: Menggunakan Blade + Alpine.js

php artisan breeze:install blade

5. Mengonfigurasi Laravel Sanctum untuk API Token

Sanctum memungkinkan otentikasi SPA dan token API. Install package:

composer require laravel/sanctum

Publikasi konfigurasi & migrasi:

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

Middleware

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

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

Contoh Penggunaan Token

// routes/api.php
use App\Models\User;
use Illuminate\Http\Request;

Route::post('/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]);
});

6. Struktur Direktori Modern & Best Practice

• app/Models – gunakan model tunggal, hindari App\User lama.
• app/Http/Controllers/API – pisahkan API controller dari web.
• resources/views/components – manfaatkan Blade component untuk UI reuse.
• routes/web.php – letakkan route UI, routes/api.php – route API.
• tests/Feature – gunakan Pest atau PHPUnit, contoh:

uses(TestCase::class)->group('auth');

test('user can login via API', function () {
    $user = User::factory()->create(['password' => bcrypt('secret')]);
    $response = $this->postJson('/api/login', ['email' => $user->email, 'password' => 'secret']);
    $response->assertOk()->assertJsonStructure(['token']);
});

7. Optimasi Produksi

1. Compile assets:

npm run build

2. Cache konfigurasi & route:

php artisan config:cache
php artisan route:cache
php artisan view:cache

3. Gunakan php artisan optimize untuk memuat class map.
4. Set APP_ENV=production dan APP_DEBUG=false di .env.

8. Deploy ke Server Linux (DigitalOcean, Hetzner, dll)

# 1. Upload repo via git
git clone https://github.com/username/blog.git
cd blog

# 2. Install dependencies
composer install --optimize-autoloader --no-dev
npm ci && npm run build

# 3. Environment
cp .env.example .env
php artisan key:generate
php artisan migrate --force

# 4. Permissions
sudo chown -R www-data:www-data storage bootstrap/cache
sudo chmod -R 775 storage bootstrap/cache

# 5. Configure web server (NGINX example)
server {
    listen 80;
    server_name example.com;
    root /var/www/blog/public;
    index index.php;
    location / { try_files $uri $uri/ /index.php?$query_string; }
    location ~ \.php$ {
        fastcgi_pass unix:/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

9. Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda memiliki fondasi Laravel 11 yang modern, menggunakan Vite untuk asset bundling, Breeze untuk starter kit UI, dan Sanctum untuk keamanan API. Praktik best practice seperti pemisahan controller, caching produksi, dan struktur direktori yang bersih akan mempercepat development dan memudahkan scaling di masa depan.

Setup Laravel 11 dengan Vite, Breeze, dan Sanctum memberikan lingkungan pengembangan yang cepat, aman, dan siap produksi. Ikuti best practice di atas untuk memastikan kode tetap bersih, mudah dipelihara, serta optimal di server nyata.

---

Tutorial step-by-step setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, TailwindCSS, dan best practice modern untuk pengembangan web PHP Framework.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend