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

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite, menambahkan Breeze untuk otentikasi, mengintegrasikan Sanctum API token, serta menerapkan Tailwind CSS dengan best practice pada tahun 2026.

1. Persiapan Lingkungan

Pastikan server Anda memenuhi persyaratan minimum Laravel 11:

• PHP >= 8.2
• Extensi: OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype, JSON, BCMath
• Composer 2.x
• Node.js >= 20 dan npm atau Yarn

1.1 Instalasi Composer & Laravel Installer

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

Verifikasi versi:

laravel --version

2. Membuat Project Laravel 11

laravel new blog --jetstream=none --stack=livewire

Atau dengan Composer:

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

2.1 Struktur Direktori Awal

Setelah proses selesai, periksa struktur app, routes, dan resources. Pastikan .env berisi koneksi database yang tepat.

3. Mengaktifkan Vite (Pengganti Laravel Mix)

Laravel 11 sudah menyertakan Vite secara default. Pastikan paket berikut terinstall:

npm install @vitejs/plugin-vue@latest vite laravel-vite-plugin@latest

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

3.2 Menambahkan Tailwind CSS

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

Ubah tailwind.config.js:

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

Dan tambahkan directive ke resources/css/app.css:

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

3.3 Menjalankan Development Server

npm run dev

Laravel Mix sudah digantikan; Vite akan hot‑reload secara otomatis.

4. Menyisipkan Laravel Breeze (Starter Kit)

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

Jika ingin menggunakan Inertia atau Livewire, ganti parameter blade dengan vue atau react. Pada contoh ini kita pakai Blade.

4.1 Migrasi Database

php artisan migrate

Setelah migrasi, jalankan php artisan serve dan akses http://localhost:8000/register untuk memastikan otentikasi berfungsi.

5. Mengintegrasikan Laravel Sanctum untuk API Token

Sanctum menyediakan dua mode: SPA authentication (cookie‑based) dan API token. Kita akan menyiapkan API token.

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 (hanya untuk SPA). Untuk token‑based, cukup gunakan auth:sanctum pada route.

5.3 Membuat Route API

use AppHttpControllersApiPostController;

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/posts', [PostController::class, 'index']);
    Route::post('/posts', [PostController::class, 'store']);
});

5.4 Contoh Controller

namespace AppHttpControllersApi;
use AppHttpControllersController;
use AppModelsPost;
use IlluminateHttpRequest;

class PostController extends Controller {
    public function index(){
        return Post::latest()->paginate(10);
    }
    public function store(Request $request){
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'body' => 'required|string',
        ]);
        $post = $request->user()->posts()->create($validated);
        return response()->json($post, 201);
    }
}

5.5 Menghasilkan Token

Setelah login via Breeze, gunakan endpoint berikut (misal /sanctum/token) atau buat route khusus:

Route::post('/sanctum/token', function (Request $request) {
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
        'device_name' => 'required',
    ]);
    $user = AppModelsUser::where('email', $request->email)->first();
    if (! $user || ! Hash::check($request->password, $user->password)) {
        abort(401);
    }
    return $user->createToken($request->device_name)->plainTextToken;
});

6. Best Practice Modern untuk Laravel 11

• Environment Variables: Simpan rahasia di .env dan gunakan config:cache di produksi.
• Static Analysis: Tambahkan phpstan atau psalm untuk type safety.
• Testing: Gunakan PestPHP atau PHPUnit; contoh:
  php artisan test
• Docker: Buat container resmi (php:8.2-fpm, mysql, redis, node) untuk konsistensi dev‑ops.
• CI/CD: Integrasikan GitHub Actions yang menjalankan lint, test, dan deploy otomatis ke Laravel Vapor atau server tradisional.
• Cache & Queue: Konfigurasi Redis sebagai driver default; gunakan job batching untuk proses berat.
• Code Style: Terapkan PSR‑12 dengan composer fix (PHP-CS-Fixer).

7. Deploy ke Production

1. Set APP_ENV=production dan APP_DEBUG=false di .env.
2. Jalankan php artisan config:cache, php artisan route:cache, dan php artisan view:cache.
3. Build assets: npm run build (Vite akan menghasilkan file minified di public/build).
4. Pastikan izin folder storage dan bootstrap/cache 0755.
5. Gunakan server web Nginx dengan konfigurasi try_files $uri $uri/ /index.php?$query_string;.

8. Verifikasi Akhir

Buka URL produksi, coba register, login, dan panggil endpoint API dengan token yang di‑generate. Pastikan tidak ada error di log (storage/logs/laravel.log).

Dengan mengikuti langkah‑langkah di atas, Anda mendapatkan aplikasi Laravel 11 yang modern, scalable, dan aman—menggunakan Vite untuk asset bundling, Breeze untuk otentikasi cepat, Sanctum untuk API token, serta Tailwind CSS untuk UI responsif. Terapkan best practice seperti caching, containerisasi, dan CI/CD untuk memastikan proyek tetap terjaga kualitasnya di tahun 2026.

---

Tutorial step‑by‑step setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Panduan lengkap 2026 untuk developer PHP dan Web Development.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend