Erste Schritte mit der AEM-Erweiterung für PWA Studio getting-started-pwa
Standardmäßig lässt sich PWA Studio über GraphQL nahtlos mit Adobe Commerce integrieren und bietet unbegrenzte Möglichkeiten zur Erstellung innovativer und ansprechender Storefronts und anderer digitaler Erlebnisse.
Inhaltsfragmente sind Teile von Inhalten mit einer vordefinierten Struktur, die es ermöglicht, sie mit GraphQL als API in verschiedenen Formaten (z. B. JSON, Markdown) „headless“ zu nutzen und unabhängig zu rendern. Inhaltsfragmente enthalten alle für GraphQL erforderlichen Datentypen und -felder, um sicherzustellen, dass Ihre Anwendung nur das anfordert, was verfügbar ist, und das erhält, was erwartet wird. Die Flexibilität ihrer Struktur macht sie perfekt für die Verwendung an mehreren Stellen und über mehrere Kanäle.
Mit dem Inhaltsfragmentmodell-Editor in Adobe Experience Manager können Sie die benötigte Struktur einfach entwerfen. Die Hauptaufgabe bei der Integration von Adobe Experience Manager-Inhaltsfragmenten (oder anderen Daten) in Ihre PWA Studio-Anwendung besteht darin, Daten von mehreren GraphQL-Endpunkten abzurufen. Dies liegt daran, dass PWA Studio standardmäßig mit einem einzigen Adobe Commerce-GraphQL-Endpunkt arbeitet.
Architektur architecture
Einrichten von PWA Studio setup-pwa
Um Ihre PWA Studio-App einzurichten, folgen Sie der Dokumentation zu PWA Studios von Adobe Commerce.
Um PWA Studio mit dem GraphQL-Endpunkt von AEM zu verbinden, können Sie die AEM-Erweiterung für PWA Studio verwenden.
-
Überprüfen des Repositorys
-
Fügen Sie in Ihrer PWA Studio-Anwendung die Erweiterung als Entwicklungsabhängigkeit hinzu.
code language-javascript yarn add --dev file:{path-to-extension}/extension -
Fügen Sie den Apollo Link-Wrapper zu Ihrer PWA Studio-Anwendung hinzu. Nehmen Sie in pwa-root/src/index.js die folgenden Änderungen vor:
code language-javascript import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension'; // ... <Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>Weitere Informationen zur Anpassung des Apollo-Clients finden Sie unter linkWrapper.js.
-
Um die Navigationskomponente mit einem Blog-Eintrag zu erweitern, fügen Sie die folgenden Anpassungen zu pwa-root/local-intercept.js hinzu:
code language-javascript const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation'); function localIntercept(targets) { addBlogToNavigation(targets); }Weitere Informationen zur Anpassung der Navigationskomponente finden Sie in addBlogToNavigation.js und in der Dokumentation zum Erweiterbarkeits-Framework von PWA Studio.
-
Der Apollo-Client erwartet den AEM GraphQL-Endpunkt bei
<https://pwa-studio/endpoint.js>. Um den Endpunkt diesem Speicherort zuzuordnen, müssen Sie die UPWARD-Konfiguration Ihrer PWA Studio-Anwendung anpassen:
a. Fügen Sie die Variable AEM_CFM_GRAPHQL zupwa-root/.envhinzu und passen Sie sie an, sodass sie auf Ihren GraphQL-Endpunkt für AEM-Inhaltsfragmente verweist.Beispiel: AEM_CFM_GRAPHQL=http://localhost:4503/content/graphql/global
b. Fügen Sie Ihrer UPWARD-Konfiguration einen Proxy-Resolver hinzu. Eine Beispiel-UPWARD-Konfiguration könnte wie folgt aussehen:
response:
resolver: conditional
when:
- matches: request.url.pathname
pattern: ^/endpoint.json(/|$)
use: aemProxy
default: veniaResponse
aemProxy:
resolver: proxy
target: env.AEM_CFM_GRAPHQL
ignoreSSLErrors: true
status: response.status
headers: response.headers
body: response.body
Einrichten von AEM setup-aem
Folgen Sie der Dokumentation zu AEM-Inhaltsfragmenten, um einen GraphQL-Endpunkt für Ihr AEM-Projekt einzurichten. Fügen Sie in Ihrem AEM-Projekt außerdem die folgenden Konfigurationen hinzu, damit Ihre PWA Studio-Anwendung auf den GraphQL-Endpunkt zugreifen kann:
-
Adobe Granite Cross-Origin Resource Sharing Policy (com.adobe.granite.cors.impl.CORSPolicyImpl)
Legen Sie die Eigenschaft
allowedoriginauf den vollständigen Host-Namen Ihrer PWA-Anwendung fest.Beispiel:
<https://pwa-studio-test-vflyn.local.pwadev:9366> -
Apache Sling Referrer Filter (org.apache.sling.security.impl.ReferrerFilter.cfg.json)
Setzen Sie die Eigenschaft „allow.hosts“ auf den Hostnamen Ihrer PWA-Anwendung.
Beispiel: pwa-studio-test-vflyn.local.pwadev
Die vollständigen Beispiele für beide Konfigurationen finden Sie hier: https://github.com/adobe/aem-pwa-studio-extensions/tree/master/aem-cfm-blog-extension/aem/config/src/main/content/jcr_root/apps/blog-demo/config.
Um den GraphQL-Endpunkt zu präsentieren, haben wir einige Beispiel-Inhaltsfragmentmodelle und -daten über ein Inhaltspaket vorbereitet. Diese funktionieren gut zusammen mit den React-Komponenten, die mit der PWA Studio-Erweiterung bereitgestellt werden.
Verwendung how-to-use
Diese Erweiterung gilt als Beispielimplementierung der Verbindung einer PWA Studio-Anwendung mit AEM zum Abrufen und Rendern von Inhalten über GraphQL.
Je nach Anwendungsfall sollten Sie eigene benutzerdefinierte Inhaltsfragmentmodelle erstellen, die zu einem benutzerdefinierten GraphQL-Schema führen, das dann von Ihren eigenen React-Komponenten genutzt werden kann.
Produktions-Setups können verschiedene Aspekte aufweisen.
- Sie können über einen einzigen zusammengeführten GraphQL-Endpunkt verfügen, der AEM- und Adobe Commerce-GraphQL-Daten kombiniert, anstatt den Apollo-Client anzupassen.
- Ihre PWA Studio-Anwendung könnte die AEM GraphQL-Endpunkt-URL direkt verwenden, ohne dass ein Proxy mit UPWARD vorhanden ist. Der Proxy kann auch in eine andere Ebene verschoben werden (z. B. CDN).
- Welcher Ansatz für Sie am besten geeignet ist, hängt auch stark davon ab, wie Sie die PWA Studio-Anwendung an die Endbenutzerin oder den Endbenutzer liefern.
Diese Erweiterung enthält zwei Beispiele.
Blog blog
Zeigt Blog-Beiträge basierend auf einigen Inhaltsfragmentmodellen an. Darüber sind Beispiele dazu enthalten, wie man den Apollo-Client so konfiguriert, dass er mit dem AEM GraphQL-Endpunkt zusammenarbeitet, und wie die Navigationskomponente in PWA Studio erweitert wird. Weitere Informationen finden Sie unter GitHub.
PDP-Anreicherung pdp-enrichment
Ermöglicht es Marketern, PDPs einfach mit zusätzlichen Inhalten anzureichern, die als Inhaltsfragmente verwaltet werden. Weitere Informationen finden Sie unter GitHub.