Ich habe kürzlich ein Video auf X gepostet, in dem ich in weniger als einer Minute ein Laravel React-Projekt mit Authentifizierung und einer Benutzerprofilseite eingerichtet habe! Ich dachte, es wäre hilfreich, eine schriftliche Version zusammen mit einer detaillierten Anleitung für alle bereitzustellen, die lieber folgen möchten.

In diesem Leitfaden zeige ich Ihnen, wie Sie schnell ein neues Laravel-Projekt mit einem React-Frontend und integrierter Authentifizierung einrichten, alles mit Laravel Breeze . Wir werden ein funktionsfähiges Benutzerpanel mit Profilbearbeitung in nur wenigen Schritten haben.

Warum Laravel?

Laravel ist ein beliebtes PHP-Framework, das zum Erstellen moderner Webanwendungen verwendet wird. Es gewinnt schnell an Bedeutung, tatsächlich kündigte Accel im September 2024 eine 57-Millionen-Dollar-Investition in Laravel an.

Laut der offiziellen Website ist Laravel „Das PHP-Framework für Web-Artisans“ und wird dieser Beschreibung wirklich gerecht.

Ich werde nicht zu viel Zeit damit verbringen, was Laravel ist, es gibt eine Menge Informationen auf der offiziellen Website und in der Dokumentation. Beginnen wir stattdessen gleich mit der Einrichtung Ihres Projekts.

Projektaufbau

Tech-Stack

Wir verwenden:

• Laravel (für Backend-APIs)

• SQLite, die Standarddatenbank für Laravel-Projekte (obwohl Sie problemlos zu einer anderen Datenbank wechseln können)

• React für das Frontend (mit Inertia.js)

• Laravel Breeze für die Authentifizierung und Benutzerverwaltung

Anforderungen

Um dieser Anleitung zu folgen, stellen Sie sicher, dass Sie Folgendes haben:

• PHP 8 (vorzugsweise 8.3)

• Komponist

• Node.js (v21)

Bereit? Fangen wir an!

Schritt 1: Erstellen Sie ein neues Laravel-Projekt

Erstellen Sie zunächst mit Composer ein neues Laravel-Projekt:

composer create-project laravel/laravel laravel-project

Dadurch wird ein neues Verzeichnis mit dem Standard-Laravel-Setup erstellt. In das Projektverzeichnis wechseln und die Anwendung bereitstellen:

cd laravel-project
php artisan serve

Wenn Sie http://localhost:8000 besuchen, sehen Sie die Laravel-Willkommensseite.

Herzlichen Glückwunsch, Sie haben Ihr erstes Laravel-Projekt erstellt! ✅

Standardmäßig verwendet Laravel eine SQLite-Datenbank, die bereits für Sie eingerichtet wurde. Sie finden die Datenbankdatei unter Database/database.sqlite.

Schritt 2: Installieren Sie Laravel Breeze

Als nächstes fügen wir Laravel Breeze hinzu, das eine minimale Implementierung der Authentifizierung bereitstellt, einschließlich:

• Login

• Anmeldung

• Passwort zurücksetzen

• E-Mail-Bestätigung

• Passwortbestätigung

Zusätzlich enthält Breeze eine einfache Profilseite, auf der Benutzer ihre Informationen aktualisieren können.

Fügen Sie das Breeze-Paket hinzu, indem Sie Folgendes ausführen:

composer require laravel/breeze --dev

Jetzt installieren Sie Breeze in Ihrem Projekt:

php artisan breeze:install

Während der Installation fordert Breeze Sie zur Eingabe einiger Optionen auf:

• Ich wähle React für das Frontend, aber es gibt ein paar Alternativen:

  • Klinge
  • Livewire
  • Vue
  • Nur API

• Optional können Sie Dunkelmodus, Server-Side Rendering (SSR), Typescript und ESLint aktivieren. .

• Wenn Sie nach einem Test-Framework gefragt werden, können Sie zwischen Pest oder PHPUnit wählen. Ich verwende Pest.

Sobald der Vorgang abgeschlossen ist, hat Breeze alles hinzugefügt, was Sie für die Authentifizierung und Benutzerverwaltung benötigen.

Es ist geschafft! ?

Schritt 3: Führen Sie Ihre Anwendung aus

Jetzt, da Breeze eingerichtet ist, ist Ihre Anwendung bereit und Sie können sie erneut ausführen:

php artisan serve

Besuchen Sie http://localhost:8000/register, um einen neuen Benutzer zu erstellen.

Sie beginnen mit einem leeren Dashboard und können zu Ihrer Profilseite navigieren, um Ihre Benutzerdetails zu bearbeiten und Ihr Passwort zu aktualisieren.

Die Daten sind bereits in Ihrer SQLite-Datenbank gespeichert und Ihre App ist im Wesentlichen bereit für die Bereitstellung!

Abschluss

Indem Sie diese Schritte befolgen, haben Sie mit Laravel und React erfolgreich eine Full-Stack-Webanwendung gebootet, komplett mit Authentifizierung und einem Benutzerprofilverwaltungssystem.

Breeze bietet Ihnen einen guten Ausgangspunkt, aber von hier aus können Sie sich auf das Hinzufügen benutzerdefinierter Geschäftslogik, die Verbesserung von UI/UX oder die Integration von Drittanbieterdiensten konzentrieren, während Sie gleichzeitig auf den Schultern des Laravel-Ökosystems stehen.