News

Loading...

Community Links

Laravel Jobs

Latest News

Loading...

Latest Partners

Loading...

Partners

Loading...

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


Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel versi terbaru, mengonfigurasi Vite, menambahkan authentication dengan Breeze, mengamankan API menggunakan Sanctum, serta mengoptimalkan pengembangan front‑end modern.

1. Prasyarat

Pastikan sistem Anda sudah terinstall:

  • PHP 8.3 atau lebih tinggi
  • Composer 2.x
  • Node.js 20.x dan npm 10.x
  • Database MySQL/MariaDB (atau SQLite untuk dev)
  • Git

2. Instalasi Laravel 11

2.1 Buat proyek baru

Jalankan perintah berikut untuk membuat project Laravel dengan starter kit laravel/laravel:

composer create-project laravel/laravel laravel-app "^11.0"

2.2 Masuk ke direktori proyek

cd laravel-app

3. Konfigurasi Vite (Bundler Front‑end)

3.1 Install dependencies

npm install

3.2 Sesuaikan vite.config.js

Laravel 11 sudah menyertakan konfigurasi default, cukup pastikan plugin laravel-vite-plugin terinstall:

npm install --save-dev laravel-vite-plugin

3.3 Jalankan dev server

npm run dev

Vite akan menyalakan localhost:5173 dan Laravel akan otomatis mendeteksi aset.

4. Menambahkan Authentication dengan Breeze

4.1 Install Breeze

composer require laravel/breeze --dev

4.2 Scaffold UI dengan Blade atau React/Vue

Pilih Blade (default):

php artisan breeze:install blade

Atau pilih React:

php artisan breeze:install react

4.3 Install front‑end dependencies & compile

npm install && npm run dev

4.4 Migrasi database

php artisan migrate

Anda kini memiliki rute auth lengkap: /login, /register, dll.

5. Mengamankan API dengan Laravel Sanctum

5.1 Install Sanctum

composer require laravel/sanctum

5.2 Publish konfigurasi & migrasi

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

5.3 Konfigurasi 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,
],

5.4 Buat route API contoh

Route::middleware('auth:sanctum')->get('/user/profile', function (Request $request) {
    return $request->user();
});

5.5 Front‑end request dengan Axios (React/Vue)

axios.get('/api/user/profile', { withCredentials: true })
    .then(response => console.log(response.data));

6. Optimasi & Best Practice

  • Environment variables: Simpan kunci sensitif di .env dan gunakan config:cache pada production.
  • Cache config & routes: php artisan config:cache & php artisan route:cache.
  • Queue & Jobs: Gunakan redis driver untuk queue ketika aplikasi scaling.
  • Testing: Laravel 11 mendukung Pest & PHPUnit. Tambahkan contoh test dengan php artisan test.
  • Docker: Buat container dengan Laravel Sail (./vendor/bin/sail up -d) untuk environment konsisten.
  • Linting & Formatting: Pasang Laravel Pint (composer require laravel/pint --dev) untuk standar coding.

7. Deploy ke Production

  1. Build assets: npm run build
  2. Set APP_ENV=production dan APP_DEBUG=false di .env
  3. Jalankan php artisan migrate --force
  4. Cache konfigurasi & route
  5. Gunakan web server yang direkomendasikan: Nginx + PHP-FPM

Setelah semua langkah selesai, aplikasi Laravel 11 Anda siap melayani trafik dengan arsitektur modern.


Dengan mengikuti tutorial ini Anda telah menyiapkan Laravel 11 secara lengkap—mulai dari instalasi, Vite, autentikasi Breeze, hingga API aman dengan Sanctum. Mengadopsi best practice seperti cache, queue, dan Docker akan memastikan proyek Anda skalabel, maintainable, dan siap produksi dalam ekosistem Laravel modern.
Tutorial step‑by‑step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan best practice modern untuk pengembangan web cepat dan aman.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend

Tidak ada komentar:

Posting Komentar

Most Read

Loading...

Tutorial

Loading...

Packages

Loading...