Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan Typescript

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11 terbaru, mengintegrasikan Vite, Breeze, Sanctum, dan TypeScript, sehingga Anda mendapatkan fondasi proyek yang modern, cepat, dan aman.

1. Prasyarat

• PHP 8.3 atau lebih baru
• Composer 2.x
• Node.js 20.x dan npm 10.x
• Database (MySQL 8+, PostgreSQL, atau SQLite)

2. Instalasi Laravel 11

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

Masuk ke folder proyek:

cd blog

3. Konfigurasi .env

Salin file contoh dan sesuaikan database Anda:

cp .env.example .env
php artisan key:generate

Ubah nilai berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=

4. Instalasi Vite (Laravel Mix digantikan)

Laravel 11 sudah menyertakan Vite secara default, namun kita perlu menambahkan dukungan TypeScript dan React (opsional).

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-vue # jika menggunakan Vue
npm install --save-dev typescript @types/node # untuk TypeScript

Ubah vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.ts'],
            refresh: true,
        }),
        vue(),
    ],
});

5. Migrasi ke TypeScript

Ganti berkas JavaScript utama:

mv resources/js/app.js resources/js/app.ts

Contoh isi app.ts:

import './bootstrap';
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

createApp({
    components: { ExampleComponent },
}).mount('#app');

6. Install Laravel Breeze (Auth starter)

composer require laravel/breeze --dev
php artisan breeze:install vue

Jika ingin menggunakan React:

php artisan breeze:install react

Jalankan Composer autoload dan npm:

composer install
npm install
npm run dev

7. Konfigurasi Sanctum untuk API Token

composer require laravel/sanctum

Publikasikan file konfigurasi dan migrasi:

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

Tambahkan middleware Sanctum pada api guard di config/sanctum.php (default sudah tepat). Pastikan Sanctum dicantumkan di api middleware grup pada app/Http/Kernel.php:

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

Contoh endpoint token

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

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

8. Menjalankan Proyek

php artisan serve   # Laravel dev server (http://localhost:8000)
npm run dev        # Vite hot‑module replacement

9. Best Practice Modern

• Environment Segregation: Simpan rahasia di .env dan gunakan .env.testing untuk CI.
• Static Analysis: Tambahkan phpstan dan larastan untuk type‑safety.

  composer require --dev phpstan/phpstan larastan/larastan

• Code Formatting: Gunakan pint (Laravel Pint) untuk standar coding.

  composer require --dev laravel/pint
  ./vendor/bin/pint

• Testing: Buat tes fitur dengan php artisan test dan gunakan Laravel Sanctum untuk autentikasi di API test.
• Cache Configuration: Aktifkan redis di production dan set CACHE_DRIVER=redis pada .env.
• Queue: Gunakan database atau redis driver, jalankan php artisan queue:work di supervisor.

10. Deploy ke Production (Ringkas)

1. Clone repo di server, install dependensi: composer install --optimize-autoloader --no-dev
2. Build assets: npm ci && npm run build
3. Set environment variables, migrasi, dan cache config:

   php artisan migrate --force
   php artisan config:cache
   php artisan route:cache
   php artisan view:cache

4. Jalankan queue worker dan scheduler dengan Supervisor / Cron.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terstruktur dengan Vite, TypeScript, Breeze untuk UI starter, dan Sanctum untuk API authentication. Kombinasi ini memberi kecepatan pengembangan, performa front‑end modern, serta keamanan yang sesuai standar Laravel terbaru. Terapkan best practice seperti static analysis, testing, dan caching untuk menghasilkan aplikasi produksi yang stabil dan scalable.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan TypeScript. Langkah demi langkah, contoh kode, dan best practice modern untuk pengembangan web PHP framework terkini.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend