私は最近、X に認証とユーザー プロフィール ページを備えた Laravel React プロジェクトを 1 分以内にセットアップするビデオを投稿しました。詳細なガイドに沿って進みたい人のために、文書版を共有することが役立つと思いました。

このガイドでは、Laravel Breeze を使用して、React フロントエンドと組み込み認証を備えた新しい Laravel プロジェクトをすばやくセットアップする方法を説明します。 。わずか数ステップでプロフィール編集ができる機能的なユーザー パネルが完成します。

なぜララベルなのか?

Laravel は、最新の Web アプリケーションの構築に使用される人気のある PHP フレームワークです。実際、2024 年 9 月に、Accel は Laravel への 5,700 万ドルの投資を発表しました。

公式サイトによると、Laravel は「Web 職人のための PHP フレームワーク」であり、まさにその説明に忠実です。

Laravel とは何かについてはあまり時間をかけません。公式 Web サイトとドキュメントには大量の情報が掲載されています。代わりに、プロジェクトのセットアップに取り掛かりましょう。

プロジェクトのセットアップ

技術スタック

次を使用します:

• Laravel (バックエンド API 用)

• SQLite これは Laravel プロジェクトのデフォルトのデータベースです (ただし、別のデータベースに簡単に切り替えることができます)

フロントエンドの

• React (Inertia.js を使用)

• Laravel Breeze 認証とユーザー管理を処理します

要件

このガイドに従うには、次のものが必要です:

• PHP 8 (できれば 8.3)

• 作曲家

• Node.js (v21)

準備ができて？始めましょう!

ステップ 1: 新しい Laravel プロジェクトを作成する

まず、Composer を使用して新しい Laravel プロジェクトを作成します:

composer create-project laravel/laravel laravel-project

これにより、デフォルトの Laravel セットアップで新しいディレクトリが作成されます。プロジェクト ディレクトリに移動し、アプリケーションを提供します:

cd laravel-project
php artisan serve

http://localhost:8000 にアクセスすると、Laravel のウェルカム ページが表示されます。

おめでとうございます。最初の Laravel プロジェクトが作成されました。 ✅

デフォルトでは、Laravel はすでにセットアップされている SQLite データベースを使用します。データベース ファイルは、database/database.sqlite.

ステップ 2: Laravel Breeze をインストールする

次に、Laravel Breeze を追加します。これは、次のような最小限の認証実装を提供します。

• ログイン

• 登録

• パスワードのリセット

• メール認証

• パスワードの確認

さらに、Breeze には、ユーザーが自分の情報を更新できる簡単なプロフィール ページが含まれています。

次のコマンドを実行して Breeze パッケージを追加します:

composer require laravel/breeze --dev

次に、Breeze をプロジェクトにインストールします:

php artisan breeze:install

インストール中に、Breeze はいくつかのオプションの入力を求めます:

• 私はフロントエンドとして React を選択しますが、代替手段がいくつかあります:

  • ブレード
  • ライブワイヤー
  • ビュー
  • API のみ

• オプションで、ダーク モード、サーバーサイド レンダリング (SSR)、Typescript、ESLintを有効にできます。 .

• テスト フレームワークについて尋ねられた場合、Pest または PHPUnit のいずれかを選択できます。 ペストを使用します。

プロセスが完了すると、Breeze には認証とユーザー管理に必要なものがすべて追加されます。

完成しました！ ?

ステップ 3: アプリケーションを実行する

Breeze がセットアップされたので、アプリケーションの準備が整い、再度実行できるようになります:

php artisan serve

http://localhost:8000/register にアクセスして新しいユーザーを作成します。

空のダッシュボードから開始し、プロフィール ページに移動してユーザーの詳細を編集し、パスワードを更新できます。

データはすでに SQLite データベースに保存されており、アプリは基本的にデプロイする準備ができています!

結論

これらの手順に従うことで、Laravel と React を使用し、認証とユーザー プロファイル管理システムを備えたフルスタック ウェブ アプリケーションを正常にブートストラップすることができました。

Breeze は優れた出発点を提供しますが、ここからは、Laravel のエコシステムを担いながら、カスタム ビジネス ロジックの追加、UI/UX の改善、サードパーティ サービスの統合に集中できます。