Documentatie AEM as a Cloud Service Handboek

Een externe SPA bewerken in AEM editing-external-spa-within-aem

Last update: Thu Jun 12 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Van toepassing op:
Experience Manager as a Cloud Service

Onderwerpen:
Ontwikkelen

Gemaakt voor:

Beheerder
Ontwikkelaar

Wanneer het beslissen van welk niveau van integratieu tussen uw externe SPA en AEM zou willen hebben, overweeg dat u het KUUROORD binnen AEM moet kunnen uitgeven en bekijken, vaak.

IMPORTANT

De redacteur van het KUUROORD is afgekeurdvoor nieuwe projecten. Het blijft door Adobe ondersteund voor bestaande projecten, maar mag niet worden gebruikt voor nieuwe projecten. De voorkeurseditors voor het beheer van inhoud zonder kop in AEM zijn nu:

de Universele Redacteurvoor visueel het uitgeven van hoofdloze inhoud.
de Redacteur van het Fragment van de Inhoudvoor op vorm-gebaseerde het uitgeven van hoofdloze inhoud.

Overzicht overview

Dit document beschrijft de geadviseerde stappen om een standalone SPA aan een instantie van AEM te uploaden, editable secties van inhoud toe te voegen, en creatie toe te laten.

Vereisten prerequisites

De voorwaarden zijn eenvoudig.

Zorg ervoor dat een instantie van AEM lokaal wordt uitgevoerd.
Creeer een project van basisAEM SPA gebruikend het Archetype van het Project van AEM.
- Forms de basis van het AEM-project dat wordt bijgewerkt met de externe SPA.
- Voor de steekproeven in dit document, gebruikt Adobe het uitgangspunt van het project van KND SPA.
Heb het werkende, externe KUUROORD van de Reactie die u bij hand wilt integreren.

SPA uploaden naar AEM-project upload-spa-to-aem-project

Eerst, moet u externe SPA aan uw project van AEM uploaden.

Vervang src in de /ui.frontend projectmap door de map src van de React-toepassing.
Neem eventuele extra afhankelijkheden op in het bestand /ui.frontend/package.json van de app package.json .
- Zorg ervoor dat de gebiedsdelen van SDK van het KUUROORD van geadviseerde versieszijn.
Neem aanpassingen op in de map /public .
Neem alle inlinescripts of stijlen op die in het /public/index.html -bestand zijn toegevoegd.

Vorm Verre SPA configure-remote-spa

Nu het externe KUUROORD deel van uw project van AEM uitmaakt, moet het binnen AEM worden gevormd.

Inclusief Adobe SPA SDK-pakketten include-spa-sdk-packages

Om uit de eigenschappen van AEM SPA voordeel te halen, zijn er gebiedsdelen op de volgende drie pakketten.

Het @adobe/aem-spa-page-model-manager -pakket bevat de API voor het initialiseren van een Modelbeheer en het ophalen van het model uit de AEM-instantie. Dit model kan vervolgens worden gebruikt om AEM-componenten te renderen met API's van @adobe/aem-react-editable-components en @adobe/aem-spa-component-mapping .

Installatie installation

Voer de volgende npm opdracht uit, zodat u de vereiste pakketten kunt installeren.

npm install --save @adobe/aem-spa-component-mapping @adobe/aem-spa-page-model-manager @adobe/aem-react-editable-components

ModelManager-initialisatie model-manager-initialization

Voordat de app wordt gerenderd, moet ModelManager worden geïnitialiseerd om het maken van de AEM ModelStore af te handelen.

Deze initialisatie moet plaatsvinden in het src/index.js -bestand van uw toepassing of op de plaats waar de hoofdmap van de toepassing wordt weergegeven.

Voor deze initialisatie kunt u de initializationAsync API van ModelManager gebruiken.

De volgende schermafbeelding laat zien hoe u initialisatie van de ModelManager in een eenvoudige React-toepassing kunt inschakelen. De enige beperking is dat initializationAsync moet worden aangeroepen vóór ReactDOM.render() .

Initialize ModelManager

In dit voorbeeld wordt ModelManager geïnitialiseerd en wordt een lege ModelStore gemaakt.

De instructie initializationAsync kan optioneel een options -object als parameter accepteren:

path - Bij initialisatie wordt het model op het gedefinieerde pad opgehaald en opgeslagen in de ModelStore . Dit pad kan indien nodig worden gebruikt om de rootModel bij initialisatie op te halen.
modelClient - Hiermee kunt u een aangepaste client opgeven die het model ophaalt.
model - Een model -object dat wordt doorgegeven als een parameter die doorgaans wordt gevuld bij gebruik van SSR.

AEM Authorable Leaf Components authorable-leaf-components

Een AEM-component maken/identificeren waarvoor een authorable React-component is gemaakt. In dit voorbeeld, gebruikt het de tekstcomponent van het WKND-project.
Creeer een eenvoudige React tekstcomponent in SPA. In dit voorbeeld is een nieuw bestand Text.js gemaakt met de volgende inhoud.
Maak een configuratieobject zodat u de kenmerken kunt opgeven die vereist zijn voor het inschakelen van AEM-bewerkingen.
- resourceType is verplicht om de component React toe te wijzen aan de AEM-component en het bewerken in te schakelen wanneer deze wordt geopend in de AEM Editor.

Gebruik de wrapper functie withMappable .

Gebruik withMappable

Deze omsluitende functie wijst de component React toe aan de AEM resourceType die in config wordt gespecificeerd en laat het uitgeven mogelijkheden toe wanneer geopend in de Redacteur van AEM. Voor standalone componenten, haalt het ook de modelinhoud voor de specifieke knoop.

note note
NOTE
In dit voorbeeld zijn er verschillende versies van de component: React-componenten met omloop en los van de omloop van AEM. De omloopversie moet worden gebruikt wanneer uitdrukkelijk het gebruiken van de component. Wanneer de component deel van een pagina uitmaakt, kunt u de standaardcomponent blijven gebruiken zoals momenteel gedaan in de redacteur van het KUUROORD.

Inhoud in de component renderen.

De JCR-eigenschappen van de tekstcomponent worden als volgt weergegeven in AEM.

de componenteneigenschappen van de Tekst

Deze waarden worden als eigenschappen doorgegeven aan de gemaakte component AEMText React en kunnen worden gebruikt om de inhoud te renderen.

code language-javascript

code language-javascript
`import React from 'react'; import { withMappable } from '@adobe/aem-react-editable-components'; export const TextEditConfig = { // Empty component placeholder label emptyLabel:'Text', isEmpty:function(props) { return !props \|\| !props.text \|\| props.text.trim().length < 1; }, // resourcetype of the AEM counterpart component resourceType:'wknd-spa-react/components/text' }; const Text = ({ text }) => (<div>{text}</div>); export default Text; export const AEMText = withMappable(Text, TextEditConfig);`

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
    // Empty component placeholder label
    emptyLabel:'Text',
    isEmpty:function(props) {
       return !props || !props.text || props.text.trim().length < 1;
    },
    // resourcetype of the AEM counterpart component
    resourceType:'wknd-spa-react/components/text'
};

const Text = ({ text }) => (<div>{text}</div>);

export default Text;

export const AEMText = withMappable(Text, TextEditConfig);

Hieronder ziet u hoe de component wordt weergegeven wanneer de AEM-configuraties zijn voltooid.

code language-javascript

code language-javascript
`const Text = ({ cqPath, richText, text }) => { const richTextContent = () => ( <div className="aem_text" id={cqPath.substr(cqPath.lastIndexOf('/') + 1)} data-rte-editelement dangerouslySetInnerHTML={{__html: text}}/> ); return richText ? richTextContent() : (<div className="aem_text">{text}</div>); };`

const Text = ({ cqPath, richText, text }) => {
   const richTextContent = () => (
      <div className="aem_text" id={cqPath.substr(cqPath.lastIndexOf('/') + 1)} data-rte-editelement dangerouslySetInnerHTML={{__html: text}}/>
   );
   return richText ? richTextContent() : (<div className="aem_text">{text}</div>);
};

note note
NOTE
In dit voorbeeld zijn verdere aanpassingen aangebracht aan de gerenderde component, zodat deze overeenkomen met de bestaande tekstcomponent. Het heeft geen betrekking op authoring in AEM.

Authorable Components toevoegen aan de pagina add-authorable-component-to-page

Nadat u de authorable React-componenten hebt gemaakt, kunt u deze in de hele toepassing gebruiken.

Neem een voorbeeldpagina waar u een tekst van het project WKND SPA moet toevoegen. In dit voorbeeld wilt u de tekst "Hello World!" weergeven op /content/wknd-spa-react/us/en/home.html .

Bepaal het pad van het knooppunt dat moet worden weergegeven.
- pagePath: De pagina die het knooppunt bevat, in dit voorbeeld /content/wknd-spa-react/us/en/home
- itemPath: pad naar het knooppunt op de pagina, in dit voorbeeld root/responsivegrid/text
  - Bestaat uit de namen van de bevattende items op de pagina.
Component toevoegen op de gewenste positie op de pagina.

toe

De component AEMText kan op de gewenste positie op de pagina worden toegevoegd met pagePath - en itemPath -waarden ingesteld als eigenschappen. pagePath is een verplichte eigenschap.

Bewerken van tekstinhoud op AEM controleren verify-text-edit

Test nu de component op de actieve AEM-instantie.

Voer de volgende Maven-opdracht uit vanuit de aem-guides-wknd-spa -map, zodat u het project kunt bouwen en implementeren in AEM.

mvn clean install -PautoInstallSinglePackage

Navigeer in uw AEM-instantie naar http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html .

Uitgevend het KUUROORD in AEM

De AEMText -component kan nu worden geschreven op AEM.

AEM Authorable Pages aem-authorable-pages

Identificeer een pagina die voor creatie in het KUUROORD moet worden toegevoegd. In dit voorbeeld wordt /content/wknd-spa-react/us/en/home.html gebruikt.
Maak een bestand (bijvoorbeeld Page.js ) voor de authorable Page Component. Gebruik de pagina-component in @adobe/cq-react-editable-components .
Herhaal stap vier in de sectie AEM authorable bladcomponenten. Gebruik de wrapperfunctie withMappable op de component.

Zoals eerder is gedaan, past u MapTo toe op de AEM-brontypen voor alle onderliggende componenten in de pagina.

code language-javascript

code language-javascript
`import { Page, MapTo, withMappable } from '@adobe/aem-react-editable-components'; import Text, { TextEditConfig } from './Text'; export default withMappable(Page); MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);`

import { Page, MapTo, withMappable } from '@adobe/aem-react-editable-components';
import Text, { TextEditConfig } from './Text';

export default withMappable(Page);

MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);

note note
NOTE
In dit voorbeeld wordt de tekstcomponent React zonder omloop gebruikt in plaats van de omloop `AEMText` die eerder is gemaakt. De reden is dat wanneer de component onderdeel is van een pagina/container en niet zelfstandig is, de container ervoor zorgt dat de component recursief in kaart wordt gebracht. En, toelatend auteursmogelijkheden en de extra omslag is niet nodig voor elk kind.

Om een authorable pagina in het KUUROORD toe te voegen, volg de zelfde stappen in de sectie Voeg Authorable Componenten aan de Paginatoe. Hier kunt u de eigenschap itemPath overslaan.

Pagina-inhoud verifiëren op AEM verify-page-content

Om te verifiëren dat de pagina kan worden uitgegeven, volg de zelfde stappen in de sectie verifiëren het Uitgeven van de Inhoud van de Tekst op AEM.

Uitgevend een pagina in AEM

De pagina kan nu worden bewerkt in AEM met een lay-outcontainer en onderliggende tekstcomponent.

Virtuele bladonderdelen virtual-leaf-components

In de vorige voorbeelden hebt u componenten met bestaande AEM-inhoud toegevoegd aan de SPA. Er zijn echter gevallen waarin de inhoud nog niet in AEM is gemaakt, maar later door de auteur van de inhoud moet worden toegevoegd. Om dit scenario aan te passen, kan de front-end ontwikkelaar componenten in de aangewezen plaatsen binnen het KUUROORD toevoegen. Deze componenten tonen placeholders wanneer geopend in de redacteur in AEM. Nadat de inhoud door de auteur van de inhoud binnen deze plaatsaanduidingen is toegevoegd, worden knooppunten gemaakt in de JCR-structuur en wordt de inhoud voortgezet. De gemaakte component staat dezelfde set bewerkingen toe als de zelfstandige bladcomponenten.

In dit voorbeeld gebruikt u de component AEMText die u eerder hebt gemaakt. U wilt dat nieuwe tekst onder de bestaande tekstcomponent op de WKND-startpagina wordt toegevoegd. De toevoeging van componenten is hetzelfde als voor normale bladcomponenten. De itemPath kan echter worden bijgewerkt naar het pad waar de nieuwe component moet worden toegevoegd.

Omdat de nieuwe component onder de bestaande tekst bij root/responsivegrid/text moet worden toegevoegd, is het nieuwe pad root/responsivegrid/{itemName} .

<AEMText
 pagePath='/content/wknd-spa-react/us/en/home'
 itemPath='root/responsivegrid/text_20' />

De component TestPage ziet er als volgt uit nadat de virtuele component is toegevoegd.

het Testen van de virtuele component

NOTE

Zorg ervoor dat de AEMText -component in de configuratie is ingesteld op resourceType , zodat u deze functie kunt inschakelen.

U kunt de veranderingen in AEM na de stappen in de sectie nu opstellen verifieert het Uitgeven van de Inhoud van de Tekst op AEM. Er wordt een tijdelijke aanduiding weergegeven voor het knooppunt text_20 dat momenteel niet bestaat.

de text_20 knoop in aName

Wanneer de auteur van de inhoud deze component bijwerkt, wordt een nieuw knooppunt text_20 gemaakt op root/responsivegrid/text_20 in /content/wknd-spa-react/us/en/home .

de text20 knoop

Eisen en beperkingen limitations

Er zijn verschillende vereisten om virtuele bladcomponenten en enkele beperkingen toe te voegen.

De eigenschap pagePath is verplicht voor het maken van een virtuele component.
Het paginaknooppunt op het pad in pagePath moet bestaan in het AEM-project.
De naam van het knooppunt dat moet worden gemaakt, moet worden opgegeven in de map itemPath .
De component kan op elk niveau worden gemaakt.
- Als u een itemPath='text_20' opgeeft in het vorige voorbeeld, wordt het nieuwe knooppunt direct onder de pagina gemaakt, dat wil zeggen: /content/wknd-spa-react/us/en/home/jcr:content/text_20
Het pad naar het knooppunt waar een nieuw knooppunt wordt gemaakt, moet geldig zijn wanneer dit via itemPath wordt opgegeven.
- In dit voorbeeld moet root/responsivegrid bestaan, zodat het nieuwe knooppunt text_20 daar kan worden gemaakt.
Alleen het maken van bladcomponenten wordt ondersteund. Virtuele container en pagina worden in toekomstige versies ondersteund.

Virtuele containers virtual-containers

De mogelijkheid om containers toe te voegen, zelfs als de bijbehorende container nog niet in AEM is gemaakt, wordt ondersteund. Het concept en de benadering zijn gelijkaardig aan virtuele bladcomponenten.

De front-end ontwikkelaar kan de containercomponenten in aangewezen plaatsen binnen SPA toevoegen en deze componenten tonen placeholders wanneer geopend in de redacteur in AEM. De auteur kan vervolgens componenten en de inhoud ervan toevoegen aan de container die de vereiste knooppunten maakt in de JCR-structuur.

Als een container bijvoorbeeld bestaat bij /root/responsivegrid en de ontwikkelaar een onderliggende container wil toevoegen:

plaats van de Container

newContainer bestaat nog niet in de AEM.

Wanneer u de pagina met deze component bewerkt in AEM, wordt een lege plaatsaanduiding voor een container weergegeven waarin de auteur inhoud kan toevoegen.

placeholder van de Container

plaats van de Container in JCR

Nadat de auteur een onderliggende component aan de container heeft toegevoegd, wordt het nieuwe containerknooppunt gemaakt met de corresponderende naam in de JCR-structuur.

Container met inhoud

Container met inhoud in JCR

Meer componenten en inhoud kunnen nu aan de container worden toegevoegd zoals de auteur vereist en de veranderingen worden voortgeduurd.

Eisen en beperkingen container-limitations

Er zijn verschillende vereisten om virtuele containers en enkele beperkingen toe te voegen.

Het beleid om te bepalen welke componenten kunnen worden toegevoegd wordt geërft van de oudercontainer.
Het directe bovenliggende element van de container die moet worden gemaakt, moet in AEM bestaan.
- Als de container root/responsivegrid in de AEM-container bestaat, kan een nieuwe container worden gemaakt door het pad root/responsivegrid/newContainer op te geven.
- root/responsivegrid/newContainer/secondNewContainer is echter niet mogelijk.
Er kan slechts één nieuw componentniveau tegelijk worden gemaakt.

Aanvullende aanpassingen additional-customizations

Als u de vorige voorbeelden volgt, is uw externe SPA nu editable binnen AEM. Nochtans zijn er extra aspecten van uw externe SPA die u kunt verder aanpassen.

Hoofdknooppunt-id root-node-id

Standaard kunt u ervan uitgaan dat de React-toepassing wordt gerenderd in een div element-id spa-root . Indien nodig, kan deze syntaxis worden aangepast.

Stel dat u een SPA hebt waarin de toepassing wordt gerenderd in een div element-id root . Deze syntaxis moet worden weerspiegeld in drie bestanden.

In de index.js van de React-toepassing (of waar ReactDOM.render() wordt aangeroepen)
In de index.html van de React-toepassing
Ga in de hoofdtekst van de paginacomponent van de AEM-app als volgt te werk:
1. Maak een body.html voor de paginacomponent.
1. Voeg het basiselement toe aan het nieuwe body.html -bestand.

Het uitgeven van React SPA met het Verpletteren editing-react-spa-with-routing

Als de externe toepassing van het KUUROORD Reageren veelvoudige pagina's heeft, kan het gebruiken verpletterend om de pagina/component te bepalen omterug te geven. Het basisgebruiksgeval moet momenteel - actieve URL met de weg aanpassen die voor een route wordt verstrekt. Om het uitgeven op dergelijke verpletterende toegelaten toepassingen toe te laten, moet de weg worden aangepast tegen om AEM-specifieke info aan te passen.

In het volgende voorbeeld hebt u een eenvoudige React-toepassing met twee pagina's. De pagina die moet worden teruggegeven wordt bepaald door de weg aan de router tegen actieve URL wordt verstrekt aan te passen. Als u bijvoorbeeld op mydomain.com/test staat, wordt TestPage weergegeven.

Verpletterend in een externe KUUROORD

Om het uitgeven binnen AEM voor dit voorbeeldSPA toe te laten, worden de volgende stappen vereist.

Identificeer het niveau dat als wortel op AEM zou dienst doen.
- Voor uw steekproef, overweeg wknd-spa-response/us/en als wortel van SPA. Dit betekent dat alles voor dat pad alleen AEM-pagina's/inhoud is.
Maak een pagina op het vereiste niveau.
- In dit voorbeeld is de pagina die moet worden bewerkt mydomain.com/test . test bevindt zich in het hoofdpad van de app. Dit hoofdpad moet ook behouden blijven bij het maken van de pagina in AEM. Daarom kunt u een pagina op het wortelniveau tot stand brengen dat in de vorige stap wordt bepaald.
- De nieuwe pagina die u maakt, moet dezelfde naam hebben als de pagina die u wilt bewerken. In dit voorbeeld, voor mydomain.com/test, moet de nieuwe gemaakte pagina /path/to/aem/root/test zijn.
Voeg helpers binnen het verpletteren van het KUUROORD toe.
- De gemaakte pagina kan de verwachte inhoud in AEM nog niet weergeven. De reden is dat de router een weg van /test verwacht terwijl de actieve weg van AEM /wknd-spa-react/us/en/test is. Om het AEM-specifieke gedeelte van URL aan te passen, moet u sommige helpers op de kant van het KUUROORD toevoegen.
- U kunt de toAEMPath helper gebruiken die door @adobe/cq-spa-page-model-manager wordt geleverd. Het transformeert de weg die voor het verpletteren wordt verstrekt om AEM-specifieke gedeelten te omvatten wanneer de toepassing op een instantie van AEM open is. Er worden drie parameters geaccepteerd:
  - De weg die voor het verpletteren wordt vereist
  - De oorsprong-URL van de instantie AEM waar de SPA wordt bewerkt
  - De projectwortel op AEM zoals die in eerste stap wordt bepaald
- Deze waarden kunnen worden ingesteld als omgevingsvariabelen voor meer flexibiliteit.
Verifieer het uitgeven van de pagina in AEM.
- Implementeer het project op AEM en navigeer naar de gemaakte test pagina. De pagina-inhoud wordt nu gerenderd en AEM-componenten kunnen worden bewerkt.

Kaderbeperkingen framework-limitations

De component RemotePage verwacht dat de implementatie activa-manifest zoals webpack-manifest-stop op GitHubverstrekt. De component RemotePage is echter alleen getest om te werken met het React-framework (en Next.js via de component Remote-page-next) en biedt daarom geen ondersteuning voor het extern laden van toepassingen vanuit andere frameworks, zoals Angular.

Aanvullende bronnen additional-resources

Het volgende referentiemateriaal kan nuttig zijn om SPAs in de context van AEM te begrijpen.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab