example storefront
v5.2.1
MailChimp Open Commerce ist eine API-erste, kopflose Handelsplattform, die mit Node.js, React und GraphQL erstellt wurde. Es spielt gut mit NPM, Docker und Kubernetes.
In diesem Beispiel dient StoreFront als Referenz zur Implementierung einer webbasierten Storefront mithilfe der Reaktionskommer -GraphQL -API. Sie können dieses Projekt als Ausgangspunkt ausgeben oder mithilfe Ihrer bevorzugten kundenseitigen Technologie Ihre eigene benutzerdefinierte Erfahrung erstellen. Wir glauben zwar, dass unser Beispiel für die Storefront ausreichend ausreichend ist, um in der Produktion zu verwenden, aber es fehlen möglicherweise Funktionen, die Ihr Geschäft zu diesem Zeitpunkt benötigt.
MailChimp Open Commerce verfügt über eine robuste Reihe von Core Commerce -Funktionen direkt aus dem Box. Und da alles in unserer Codebasis erweitert, überschrieben oder als Paket installiert werden kann, können Sie auch alles auf unserer Plattform anpassen.
Dieses Beispiel für Storefront wurde mit Next.js, React, GraphQL und Apollo Client erstellt
Befolgen Sie die Schnellstarthandbuch, um alle Dienste zu installieren und auszuführen, die erforderlich sind, um die Storefront auszuführen:
| Verzeichnis: Service | URL |
|---|---|
reaction : GraphQL API | LOCALHOST: 3000/Graphql |
reaction-admin : Reaktionsverwaltung | Localhost: 4080 |
reaction : MongoDb | Localhost: 27017 |
example-storefront : Storefront | LOCALHOST: 4000 |
HINWEIS : Die StoreFront hat Umleitungen so, dass Sie, wenn Sie http: // localhost: 4000/graphQL öffnen, auf den GraphQL -Spielplatz umgeleitet werden.
Wenn Sie erstmals die Storefront und Reaktion ausführen, müssen Sie Stripe -Zahlungs- und Versandoptionen konfigurieren, um einen vollständigen Bestellkuchende -Fluss zu testen. Befolgen Sie die folgenden Schritte, nachdem Sie sich für einen Stripe -API -Schlüssel angemeldet haben:
STRIPE_PUBLIC_API_KEY ) zu .env .http://localhost:4080 . Melden Sie sich als Administrator Benutzer an.Lesen Sie die Dokumente zum Einrichten des Segments oder eines benutzerdefinierten Analyse -Tracker
Die Reaktionsplattform führt die Storefront mit Docker aus, sodass Sie Docker -Befehle verwenden müssen, um Protokolle anzuzeigen, Befehle im Container auszuführen und vieles mehr. Um Befehle speziell für die StoreFront auszuführen, wechseln Sie die Verzeichnisse in das example-storefront -Verzeichnis innerhalb des reaction-platform Repositorys:
cd example-storefrontErstellen Sie einen symbolischen Link zur Verwendung des Development Docker -Bildes:
ln -s docker-compose.dev.yml docker-compose.override.yml
Wenn Sie zum ersten Mal oder Umgebungsvariablen in .env.example ausgeführt werden, haben Sie den folgenden Befehl aus, um die Umgebungsvariablen zu aktualisieren.
./bin/setup
Starten Sie die Ladenfront durch Ausführung:
docker-compose up -d && docker-compose logs -f Ändern Sie die INTERNAL_GRAPHQL_URL in .env in die Produktions -API -URL. Die URL sollte in /graphql enden, wie: https://my-website.com/graphql . Speichern Sie die .env -Datei und starten Sie die Anwendung neu mit:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Führen Sie einen beliebigen Befehl in einem Docker -Container aus und entfernen Sie dann den Container. Verwenden Sie dies, um alle Werkzeugvorgänge auszuführen. Denken Sie daran, Ihr Projektverzeichnis wird montiert und die Dinge funktionieren normalerweise nur. Weitere Beispiele finden Sie unter dem Abschnitt Garn.
Testen vor Ort ausführen
docker-compose run --rm web yarn testFühren Sie Tests ohne Cache lokal aus (dies kann hilfreich sein, wenn Änderungen nicht angezeigt werden).
docker-compose run --rm web yarn test --no-cacheSNYK -Sicherheitstests durchführen (dies wird auf die gleiche Weise wie CI durchgeführt)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Eslint ausführen
docker-compose run --rm web eslint srcSie können die Google Chrome DevTools verwenden, um den Code zu debuggen, der auf dem Application Server von Node.js ausgeführt wird, während er in Docker ausgeführt wird.
docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.jschrome://inspect . Suchen Sie den Prozess unter Remote -Ziel und klicken Sie auf Inspect .Garn & NPM sollte im Docker -Container ausgeführt werden. Wir haben Schritte unternommen, um sicherzustellen, dass die NODE_MODULES an einem zwischengespeicherbaren Ort gelegt werden. Wenn Sie Garn lokal ausführen, werden die NODE_MODULES direkt in das Projektverzeichnis geschrieben und haben Vorrang vor denen des Docker -Builds. Garn hinzufügen
docker-compose run --rm web yarn add --dev [package]
Garn installieren
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Manchmal müssen wir die Bibliothekskomponenten für StoreFront -Komponenten im Kontext der Storefront testen. Leider gibt es in unseren Docker -Containern keine leichte Wasy, die wir in den Docker storefront durchführen müssen.
cd zu Ihrem lokalen reaction-component-library Repo.cd in den package dieses Repo und führen Sie die Befehlsgarn yarn install aus, gefolgt von yarn buildcd in den neuen dist -Ordner, den es gerade erstellt hat, und durchführen Sie yarn link , damit die Bibliothek in die Storefront installiert werden kann. Dies verknüpft @reactioncommerce/componentsexample-storefront -Repo Ihre .yarnrc Datei vorübergehend in alles andere um (dh .yarnrc-temp )yarn install und dann den Befehlsgarn yarn link "@reactioncommerce/components" aus, um die lokale Version als Überschreibung der veröffentlichten NPM -Version festzulegen.env -Datei INTERNAL_GRAPHQL_URL , um http://localhost:3000/graphql zu erreichen, das gleiche wie die EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000 laufenpackage/dist -Ordner der Komponentenbibliothek yarn add . (Dieser Ordner ist sowieso gitgeleitet.)CTRL+C herunteryarn unlink "@reactioncommerce/components" im StoreFront Repo -Ordner auscd zum package/dist Ordner des reaction-component-library Repo. Führen Sie das Befehlsgarn yarn unlink aus, um die lokale Version der Komponentenbibliothek zu entlasten.yarnrc -Datei rückgängig.env -Datei rückgängig zu Stoppen und Behälter behalten:
docker-compose stopStoppen und Behälter entfernen:
docker-compose downStoppen und Entfernen Sie Behälter, Volumina und erstellte Bilder:
docker-compose down -v --rmi local Manchmal ist es während der Entwicklung hilfreich, einen Produktionsaufbau der App zu erstellen und das vor Ort auszuführen.
Führen Sie diesen Befehl aus, um ein Docker -Image mit dem Produktionsaufbau der App zu erstellen:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Wobei XXX die Tag -Version angibt, die Sie verwenden möchten, dh 3.1.0
Um die App auf Ihrem Computer zu starten, stellen Sie sicher, dass der Reaktions -API -Container bereits ausgeführt wird und geben Sie ein:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X Hinweis: Sie können die Nummer vor dem Dickdarm in 4000:4000 durch einen anderen Lokalhost -Port ersetzen, an dem die Anwendung ausgeführt werden soll.
HINWEIS: Auf diese Weise kann die App in der tatsächlichen Produktionsbereitstellung nicht ausgeführt werden. Dies dient nur zum Ausführen der Produktionskonstruktion vor Ort für Entwicklung, Demo- oder Versuchszwecke.
Verwenden Sie:
docker stop reaction-storefrontFinden Sie einen Fehler, einen Tippfehler oder etwas, das nicht gut dokumentiert ist? Wir würden uns freuen, wenn Sie ein Problem eröffnen, das uns sagt, was wir verbessern können! Dieses Projekt verwendet semantische Freisetzung. Bitte verwenden Sie ihr Commit-Nachrichtenformat.
Möchten Sie eine Funktion anfordern? Verwenden Sie unsere Reaktionsfunktionsanforderungen Repository, um eine Anforderung einzureichen.
Wir lieben Ihre Pull -Anfragen! Überprüfen Sie unsere Good First Issue und Help Wanted -Tags, um gute Probleme zu lösen.
Pull -Anfragen sollten alle automatisierten Tests, Stil- und Sicherheitsüberprüfungen bestehen.
Ihr Code sollte alle Akzeptanztests und Unit -Tests bestehen. Laufen
docker-compose run --rm web yarn test Um die Testsuiten lokal auszuführen. Wenn Sie Reaktionsfunktionen hinzufügen, sollten Sie Tests für die zusätzliche Funktionalität hinzufügen. Sie können die Tests bei Bedarf ohne Cache ohne Cache ausführen, indem Sie das Flag --no-cache -Flag übergeben. Dies kann hilfreich sein, wenn Änderungen nicht angezeigt werden.
docker-compose run --rm web yarn test --no-cacheSo aktualisieren Sie einen fehlerhaften Snapshot (wenn Sie Änderungen an einer Komponente vorgenommen haben)
docker-compose run --rm web yarn test -uWir verlangen, dass jeder Code zur Reaktion beigetragen hat, die die Reaktionsregeln der Reaktionsanlagen folgen. Sie können rennen
docker-compose run --rm web eslint src
Eslint gegen Ihren Code lokal ausführen.
Wir verwenden das Entwicklerzertifikat (DCO) anstelle einer Mitwirkungslizenzvereinbarung für alle Beiträge zu Open -Source -Projekten für Reaktionshandel. Wir fordern, dass die Mitwirkenden den Bestimmungen des DCO zustimmen, und geben diese Vereinbarung an, indem sie alle Commits an Reaktionshandelsprojekte unterschreiben, indem Sie eine Linie mit Ihrem Namen und Ihrer E -Mail -Adresse zu jeder Git -Commit -Nachricht hinzufügen:
Signed-off-by: Jane Doe <[email protected]>
Sie können Ihr Commit automatisch mit Git unterschreiben, indem user.email git commit -s verwenden, wenn Sie Ihren user.name haben.
Wir bitten Sie, Ihren richtigen Namen zu verwenden (bitte keine anonymen Beiträge oder Pseudonyme). Durch die Unterzeichnung Ihres Commits bescheinigen Sie, dass Sie das Recht haben, das Recht zu haben, sie unter der Open -Source -Lizenz einzureichen, die von diesem bestimmten Reaktionshandelsprojekt verwendet wird. Sie müssen Ihren richtigen Namen verwenden (keine Pseudonyme oder anonyme Beiträge sind erlaubt.)
Wir verwenden die Probot DCO Github -App, um nach DCO -Anmeldungen jedes Commits zu suchen.
Wenn Sie vergessen, Ihre Commits zu unterschreiben, erinnert der DCO -Bot Sie daran und gibt Ihnen detaillierte Anweisungen, wie Sie Ihre Commits ändern können, um eine Unterschrift hinzuzufügen.
Copyright 2019 Reaktionshandel
Lizenziert unter der Apache -Lizenz, Version 2.0 (der "Lizenz"); Sie dürfen diese Datei nur in Übereinstimmung mit der Lizenz verwenden. Sie können eine Kopie der Lizenz bei erhalten
http://www.apache.org/licenses/LICENSE-2.0
Sofern nicht nach geltendem Recht oder schriftlich zu vereinbart wird, wird die im Rahmen der Lizenz verteilte Software auf "As is" -Basis ohne Gewährleistung oder Bedingungen jeglicher Art ausdrücklich oder impliziert verteilt. Siehe die Lizenz für die spezifischen Sprachberechtigungen und Einschränkungen im Rahmen der Lizenz.
