I need to create experience fragment in AEM SPA React framework. Bascially, I copied code setting from this article https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-4-with-spa-editor-how-to-use-the-experience-fragments/m-p/322742
But it did not give details for how component under JCR node setup , e.g src/main/content/jcr_root/apps/project/components/functional/spasamples/experiencefragment
So I setup .content.xml and other files like below:
my .content.xml :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
cq:styleElements="[div,section,article,main,aside,header,footer]"
jcr:primaryType="cq:Component"
jcr:title="Experience Fragment"
componentGroup="POC SPA React - Content"/>
my _cq_editConfig.xml:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
cq:actions="[EDIT,DELETE,INSERT,COPYMOVE]"
jcr:primaryType="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<experiencefragment
jcr:primaryType="cq:DropTargetConfig"
accept="[text/html]"
groups="[content]"
propertyName="./fragmentVariationPath"/>
</cq:dropTargets>
<cq:listeners
jcr:primaryType="nt:unstructured"
afterinsert="REFRESH_PAGE"/>
<cq:actionConfigs jcr:primaryType="nt:unstructured">
<editInNewTab
jcr:primaryType="nt:unstructured"
handler="Granite.author.experienceFragments && Granite.author.experienceFragments.actions.editInNewTab"
icon="edit"
text="Edit"/>
</cq:actionConfigs>
</jcr:root>
my content.html
<sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ selectors=[]}"/>
my customfooterlibs.html
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.js @ categories='global_pdc.base'}"/>
</sly>
my customheaderlibs.html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.js @ categories='global_pdc.dependencies'}"/>
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css @ categories='global_pdc.base'}"/>
<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
on my test page, i tried to drop experience fragment from the list, but it is not showing up like other component does
Any advise? Thanks