laravel react sample app

Laravel React App für BigCommerce

Dies ist eine einfache BigCommerce-App mit zwei Bildschirmen, einer Katalogzusammenfassungsansicht und einer Liste stornierbarer Bestellungen, erstellt mit Laravel und React.

Es soll Ihre Fähigkeit beschleunigen, ein Konzept für eine App in etwas umzusetzen, das im BigCommerce-Kontrollfeld verwendbar ist. Ein Live-Store kann diese App installieren, während sie lokal ausgeführt wird.

Eine exemplarische Vorgehensweise, die die zur Erstellung dieser App erforderlichen Schritte sowie die zum Erstellen der App in BigCommerce erforderlichen Schritte erläutert, können Sie hier lesen.

Voraussetzungen und Installation

Bevor Sie loslegen, sollten Sie sicherstellen, dass die Systemanforderungen erfüllt sind:

• PHP (Installationsanleitung)
• Composer (Installationsanleitung)
• Laravel (Installationsanleitung)

Um die PHP-Entwicklung zu vereinfachen und die einfache Weitergabe der von Ihnen entwickelten App zu ermöglichen, sollten Sie je nach Betriebssystem entweder Valet oder Homestead verwenden:

• Lokales SSL-Zertifikat (Empfehlen Sie Valet oder Homestead, um die Einrichtung zu vereinfachen)
  • Mac OS: Valet (Installationsanleitung)
  • Windows / Linux: Homestead (Installationsanleitung)

Für einige der folgenden Schritte verwenden wir Valet, aber die Funktionalität zum Hosten und Teilen von Websites ist bei Valet und Homestead ähnlich. In diesem Tutorial geht es vor allem darum, wie man Laravel für die Verwendung von React und die Verbindung mit BigCommerce konfiguriert.

So installieren Sie PHP-Abhängigkeiten:

composer install

Und JS-Abhängigkeiten:

npm install

Um einen BigCommerce-Shop zu testen, können Sie eine kostenlose Testversion auf bigcommerce.com erstellen oder einen kostenlosen Sandbox-Shop anfordern, indem Sie sich als Technologiepartner anmelden.

Laravel und React gemeinsam zum Laufen bringen

Hier werden wir eine Basis für die zukünftige Entwicklung erstellen: eine einfache Anwendung, die unter einer bestimmten URL in Ihrem Browser geladen wird und eine React-Komponente anstelle des Standardbildschirms von Laravel lädt.

Erstellen Sie eine neue Laravel-Codebasis. Sie können entweder den Laravel-Befehl verwenden, der das erste Boilerplate für eine App im Verzeichnis ~/Sites erstellt, oder Composer verwenden:

composer global require laravel/installer
laravel new laravel-react-bigcommerce-app

oder

composer create-project laravel/laravel laravel-react-bigcommerce-app

Besuchen Sie die App-Adresse, um sicherzustellen, dass sie lokal verfügbar ist:

Nachdem der obige Befehl ausgeführt wurde, müssen wir das Verzeichnis einrichten, damit Valet die App sicher bereitstellen kann.

 cd laravel-react-bigcommerce-app
valet link
valet secure

Sie sollten nun in Ihrem Browser die folgende URL aufrufen und den standardmäßigen Laravel-Begrüßungsbildschirm sehen können:

https://laravel-react-bigcommerce-app.test

Richten Sie React mit Breeze und Inertia als JS-Framework ein

Larvel Breeze bietet einen minimalen und einfachen Ausgangspunkt für die Erstellung einer Laravel-Anwendung mit Authentifizierungsfunktionen. Es wird von Blade und Tailwind angetrieben, kann aber mithilfe von Inertia als SPA konfiguriert werden. In diesem Beispiel werden wir unser Frontend mit React betreiben.

Zuerst installieren wir Breeze:

composer require laravel/breeze --dev

Dann installieren wir das Reaktionsgerüst:

php artisan breeze:install react

Hinweis: Dieser letzte Befehl führte npm install aus, sodass dieser Befehl nicht ausgeführt werden muss.

Zum Schluss bringen Sie die Anwendung zum Laufen:

npm run dev

In Ihrer Konsole sollte jetzt eine Local URL verfügbar sein, über die Sie Ihre React-Anwendung besuchen können

http://127.0.0.1:5173/

Referenzen

https://laravel.com/docs/10.x/installation#your-first-laravel-project https://laravel.com/docs/10.x/starter-kits

Mitwirken

Pull-Anfragen sind willkommen. Bei größeren Änderungen öffnen Sie bitte zunächst ein Problem, um zu besprechen, was Sie ändern möchten.

Lizenz

MIT