jamstack ecommerce example
1.0.0
Da die von der Website zugegriffenen Seiten nicht dynamisch generiert werden, wenn sie angefordert werden, sondern vorgeneriert und als statische HTML-Dateien dienen, sieht der Prozess der Einführung neuer Funktionen und Inhalte etwas anders aus als in "traditionellen" Webanwendungen.
Lokale Entwicklung: Die Entwicklung neuer Funktionen kann lokal durchgeführt werden.
Nuxt.js verfügt über sehr effektive Tools, mit denen ein großartiges Entwicklererlebnis wie ein Dev -Server mit Hot -Modul -Ersatz und Live -Reload unterstützt wird.
Inhalte für Produkte werden neben dem Quellcode im Git -Repository gespeichert, sodass Entwickler reale Produktdaten während der Implementierung und Prüfung verwenden können.
API -Endpunkte sollten mit einem Mock -Server, z. B. Wiremock oder Mockserver gestoppt werden, um unabhängig von realen externen Systemen zu arbeiten. Für OpenID Connect -Authentifizierung sollten Sie Keycloak lokal einrichten.
Hinweis: Dieses Beispielprojekt enthält keinen Mock -Server.
Inhalt vor dem Ablegen: Jedes Mal, wenn neue oder aktualisierte Produktdaten auf der Website veröffentlicht werden müssen, müssen die vorgeholten Inhaltsdateien im Git-Repository aktualisiert werden, bevor eine neue Version von statischen HTML-Dateien generiert wird.
Das Content -Skript von Special Node.js wird eine Verbindung zu Salesforce herstellen und die neuesten Daten über die Salesforce Rest -API abrufen. Die Inhalts -JSON -Dateien werden entsprechend aktualisiert und können dem Git -Repository verpflichtet werden.
Es liegt ganz bei Ihnen, wo und wann dieses Skript ausgeführt wird. Zum Beispiel kann es als Github -Aktion oder in einem CI -Prozess auf Travis CI ausgeführt werden.
Hinweis: Salesforce ist nur ein Beispiel für eine potenzielle Datenquelle, um Inhalte aus zu erwerben. Inhaltsdateien können auch von jeder anderen Datenquelle erstellt werden.
Veröffentlichen statischer HTML -Dateien: Jeder Commit im Git -Repository stellt eine bestimmte Implementierung und einen bestimmten Inhaltszustand der Website dar, der möglicherweise veröffentlicht werden kann.
Der Build-Prozess verwandelt den Quellcode in optimierte Stücke und generiert die statischen HTML-Dateien, indem alle zugänglichen Routen für die implementierten Seitenkomponenten und die vorgeholten Inhaltsdateien berechnet werden.
Schließlich können alle generierten Website -Dateien an jedem Webserver oder Inhaltsdeliefernetzwerk, z. B. Netlify, veröffentlicht werden.
Hinweis: Der Erstellungsprozess kann auch API -Anfragen zum Laden von Inhalten nutzen, die nicht in Inhaltsdateien im Git -Repository gespeichert sind.
Dynamische Verbesserung über APIs: Besucher werden beim Laden der Website im Browser statische HTML -Dateien bedient. Dies ist extrem schnell, da auf dem Server nichts dynamisch generiert werden muss.
Sobald die Webseite das dynamische JavaScript -Kenner geladen hat und die Seite mit dynamischen Funktionen verbessert. Dies können Funktionen wie der Einkaufswagen oder das Anzeigen personalisierter Benutzerinhalte sein.
Dynamische Daten können abgerufen werden, indem API -Anforderungen aus dem Browser gesendet werden. Besucher können sich authentifizieren, indem Sie Standardprotokolle wie OAuth 2.0 und OpenID Connect verwenden, damit die Website einzelne Inhalte präsentieren kann.
Warum? Es ermöglicht die Anmeldung mit einem echten Kundenbenutzer in der Lightning -Community.
Dieser Schritt ist erforderlich, wenn Sie vorhaben, das Skript von Inhalten Update zu verwenden und ein automatisches Abmelden in der Lightning -Community einzurichten, wenn sich Benutzer auf der Website anmelden.
Warum? Es fügt Ihre Salesforce -ORG das benutzerdefinierte Objekt "Produktkategorie" hinzu und installiert ein benutzerdefiniertes Feld im Produkt2 -Objekt, mit dem Sie die Kategorie eines Produkts definieren können. Außerdem werden eine Lightning -Webkomponente installiert, die auf einer speziellen Logout -Community -Seite verwendet wird, auf der der Benutzer automatisch angemeldet wird.
Laden Sie Salesforce CLI herunter und installieren Sie sie.
Eröffnen Sie ein Terminal in der Verzeichnis salesforce .
Verbinden Sie Salesforce CLI mit Ihrer Salesforce Org.
sfdx force:auth:web:login -a MyOrg -sStellen Sie das SFDX -Projekt in Ihre Salesforce Org bereit.
sfdx force:source:deploy -p force-appWarum? Es ermöglicht dem API -Server- und Content -Skript eine Verbindung zu Salesforce mit einem bestimmten technischen Benutzer, der die individuelle Zugriffskontrolle ermöglicht.
Warum? Es ist erforderlich, die Anmeldeseite während des OpenID -Anschluss -Authentifizierungsflusss anzuzeigen.
Wenn Sie automatische Abmeldungen für Community -Benutzer einrichten möchten, wenn sie sich auf der Website anmelden, führen Sie diese zusätzlichen Schritte aus:
Warum? Es ist für die OpenID -Connect -Authentifizierung für Website -Besucher erforderlich und ermöglicht es dem API -Server- und Content -Skript auf sichere Weise.
Dieser Schritt ist optional, da das Git -Repository bereits einige Beispielprodukte und -kategorien zur Demonstration enthält.
Sie sollten einige Datensätze für das Produkt2 -Objekt in Ihrer Salesforce -Org haben, die aktiv sind und Preisbucheinträge in einem Preisbuch für das Inhaltsaktualisierung verwenden.
Sie können auch einige Produktkategorien erstellen und Ihren Produkten zuweisen.
HINWEIS: Das Skript muss die Salesforce -Metadaten in Ihrem Org bereitstellen.
Öffnen Sie ein Terminal in den Verzeichnis content-scripts .
Legen Sie die folgenden Umgebungsvariablen ein.
| Name | Beschreibung |
|---|---|
| Salesforce_instance_url | Basis -URL der Salesforce -Instanz (Muster https://xx##.salesforce.com ) |
| Salesforce_API_VERSION | Salesforce -API -Version zu verwenden |
| Salesforce_Token_endpoint | OAuth 2.0 Token -Endpunkt der Salesforce -Instanz |
| Salesforce_client_id | Verbraucherschlüssel der angeschlossenen App (zuvor aus der App -Ansicht kopiert) |
| Salesforce_client_secret | Verbrauchergeheimnis der angeschlossenen App (zuvor aus der App -Ansicht kopiert) |
| Salesforce_username | Benutzername des Integration Benutzer |
| Salesforce_Password | Passwort des Integration Benutzer + Sicherheitstoken (einfach die beiden verkettet) |
| Salesforce_price_book_name | Optional. Preisbuch zu verwenden. Standard: "Standardpreisbuch" |
Beispiel:
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n TIPP: Sie können diese variablen Zuordnungen in eine Datei namens .env in den Verzeichnis content-scripts für die Entwicklung und Tests einfügen.
Installieren Sie die Abhängigkeiten von Node.js.
yarn install Führen Sie das Skript aus, um die Kategorien und Produkte JSON -Dateien im content zu aktualisieren.
yarn start Öffnen Sie ein Terminal in der Verzeichnis api .
Legen Sie die folgenden Umgebungsvariablen ein.
| Name | Beschreibung |
|---|---|
| HAFEN | Lokaler Serveranschluss zum Anhören. Standard: 3000 |
| Salesforce_instance_url | Basis -URL der Salesforce -Instanz (Muster https://xx##.salesforce.com ) |
| Salesforce_API_VERSION | Salesforce -API -Version zu verwenden |
| Salesforce_Token_endpoint | OAuth 2.0 Token -Endpunkt der Salesforce -Instanz (nicht Community) |
| Salesforce_jwks_endpoint | OpenID Connect JSON Web Key Set Endpunkt der Salesforce Lightning Community |
| Salesforce_issuer_url | Emittenten -URL, die in den von Salesforce ausgestellten ID -Token enthalten sind |
| Salesforce_client_id | Verbraucherschlüssel der angeschlossenen App (zuvor aus der App -Ansicht kopiert) |
| Salesforce_client_secret | Verbrauchergeheimnis der angeschlossenen App (zuvor aus der App -Ansicht kopiert) |
| Salesforce_username | Benutzername des Integration Benutzer |
| Salesforce_Password | Passwort des Integration Benutzer + Sicherheitstoken (einfach die beiden mit zwei) |
| Salesforce_price_book_name | Optional. Preisbuch zu verwenden. Standard: "Standardpreisbuch" |
| Sicherheit_Cors_Origin | Basis -URL der Webanwendung erlaubt dem Zugriff auf den Server. |
Beispiel:
PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000 TIPP: Sie können diese variablen Zuweisungen in eine Datei namens .env in der Verzeichnis api für die Entwicklung und Prüfung einfügen.
Installieren Sie die Abhängigkeiten von Node.js.
yarn installFühren Sie den Server aus.
yarn startÖffnen Sie ein Terminal im Projekt Root Directory.
Legen Sie die folgenden Umgebungsvariablen ein.
| Name | Beschreibung |
|---|---|
| Api_url | Basis -URL des API -Servers |
| Logout_url | Optional. Abmeldungsseiten -URL der Salesforce Lightning Community |
| OAuth2_authorize_endpoint | OAuth 2.0 Autorisierungsendpunkt der Salesforce Lightning Community |
| OAuth2_Userinfo_endpoint | Benutzerinformationsendpunkt des API -Servers |
| OAuth2_client_id | Verbraucherschlüssel der angeschlossenen App (zuvor aus der App -Ansicht kopiert) |
| OAuth2_Scopes | OAuth 2.0-Bereiche, die während der Authentifizierung anfordern sollten, trennte |
Beispiel:
API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id TIPP: Sie können diese variablen Zuweisungen in eine Datei namens .env in das Projekt Root Directory für die Entwicklung und Prüfung einfügen.
HINWEIS: Wenn die Variablen LOGOUT_URL nicht bereitgestellt wird, wird Benutzer sofort ohne externe RoundTrip auf die Abmeldeseite der Website umgeleitet.
Installieren Sie die Abhängigkeiten von Node.js.
yarn installStarten Sie entweder den Entwicklungsserver, der Live Reload anbietet ...
yarn dev ... oder generieren Sie zuerst die statischen HTML -Dateien und servieren Sie diese Dateien dann aus dem dist -Verzeichnis.
yarn generate
yarn startÖffnen Sie Ihren Browser unter http: // localhost: 3000
MIT -Lizenz
