Setup Laravel 10 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan TailwindCSS

Panduan lengkap step‑by‑step untuk menginstal Laravel 10 terbaru, mengonfigurasi Vite, Breeze, Laravel Sanctum, serta menambahkan TailwindCSS sesuai praktik terbaik di 2026.

1. Persiapan Lingkungan

• Pastikan PHP >= 8.2, Composer 2.x, Node.js >= 20 dan npm/yarn terinstall.
• Gunakan database MySQL 8 atau PostgreSQL 15.

1.1. Install Composer dan Laravel Installer

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

2. Membuat Project Laravel 10

laravel new blog --jetstream
# atau dengan Composer jika tidak ada laravel installer
composer create-project laravel/laravel blog "10.*" --prefer-dist

Perintah di atas menghasilkan struktur folder standar Laravel 10.

3. Mengganti Laravel Mix dengan Vite (default sejak Laravel 9)

Laravel 10 sudah menyertakan Vite. Pastikan vite.config.js ada dan package.json berisi:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

3.1. Install Dependency Front‑end

npm install
npm install -D vite laravel-vite-plugin
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

4. Menambahkan Breeze (Starter Kit) dengan TailwindCSS

composer require laravel/breeze --dev
php artisan breeze:install blade
# atau inertia/react/vue sesuai kebutuhan
npm run dev
php artisan migrate

Setelah instalasi, UI dasar sudah tersedia dengan TailwindCSS.

5. Mengonfigurasi Laravel Sanctum untuk API Token & SPA Authentication

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

5.1. Tambahkan Middleware

// app/Http/Kernel.php
'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
];

5.2. Contoh Route API dengan Sanctum

use App\Http\Controllers\API\PostController;

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

5.3. Menggunakan Token Personal Access

$user = User::find(1);
$token = $user->createToken('mobile-app')->plainTextToken;
// Return $token ke client

6. Best Practice Modern

• Environment Variables: Simpan semua rahasia di .env dan gunakan config:cache setelah perubahan.
• Route Caching: php artisan route:cache untuk produksi.
• Database Seeding & Factories: Gunakan php artisan make:factory dan php artisan db:seed untuk data contoh.
• Testing: Laravel 10 mendukung Pest & PHPUnit. Tulis tes feature untuk API Sanctum.
• Static Analysis: Integrasikan phpstan atau psalm dalam CI.
• Deploy: Gunakan Laravel Forge, Vapor, atau Docker. Contoh Dockerfile minimal:

  FROM php:8.2-fpm
  WORKDIR /var/www
  COPY . .
  RUN apt-get update && apt-get install -y zip unzip git
  RUN docker-php-ext-install pdo_mysql
  RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
  RUN composer install --no-dev --optimize-autoloader
  

7. Verifikasi Instalasi

# Jalankan server development
php artisan serve
# Buka http://localhost:8000 di browser, halaman welcome atau dashboard Breeze muncul.
# Cek endpoint API dengan token
curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8000/api/posts

Jika semua langkah berhasil, proyek Laravel 10 Anda sudah siap untuk pengembangan modern.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki basis Laravel 10 yang teroptimasi: build front‑end cepat lewat Vite, UI siap pakai dari Breeze, keamanan API modern lewat Sanctum, serta konfigurasi best practice untuk produksi. Mulailah menambahkan fitur bisnis Anda di atas fondasi ini dan nikmati produktivitas Laravel di tahun 2026.

---

Panduan lengkap install Laravel 10 dengan Vite, Breeze, Sanctum, TailwindCSS serta best practice modern untuk pengembangan web di 2026.

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

#Laravel #LaravelIndonesia #PHP #WebDev #Backend