This is the code companion for a tutorial that walks through the process of setting up an AEM project to leverage the Single Page App or SPA Editor feature.
Aside from the implementation of Adobe, I am giving few more examples to show few more examples. This tutorial extends the Adobe Weekend Tutorial to cover few key-points that are common during the development. Note: The tutorial covers the basics based on my need, so it maybe different than what you are looking for. The extension from Chapter 3 includes the following:
- Creation of a Simple Custom Component: Customization of properties, integration with React BootStrap and custom Exporter
- Creation of a container component: How to work with dynamic container where each container can contain different type of AEM Components
- Integration with Accordion in React BootStrap: Use the concept illustrated in #2 to integrate with a Accordion Component in Bootstrap
To start, please view the tutorial on HelpX: Getting Started with the AEM SPA Editor - WKND Tutorial
WKND Events for React and AEM SPA Editor - Tutorial
Adobe Code as a base:
Additional tutorial branch that I created:
- react/chapter-4/custom-component: Illustrate a simple Alert component using React Bootstrap to help understand how custom component work in AEM-React. See the Wiki page for certain aspects of the code
- react/chapter-6/dynamic-container: Illustrate the use of parsys to add other components into Accordion dynamically. Key concepts are illustrated in the corresponding Wiki Page
Having an issue? These troubleshooting tips might help:
- Verify that environment is AEM 6.4 + SP2
- Check to see if any bundles are in an installed state http://localhost:4502/system/console
- Clear the browser cache/history or start a new browser session
- Manually invalidate AEM client libraries to ensure the latest code is being loaded: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html
Still not working? Check out the closed issues or create a new issue.