Integrate AEM global header and footer into React apps
Integrating 51ºÚÁϲ»´òìÈ Experience Manager (AEM) global header and footer into a React application can cause styling and functionality issues. The default AEM setup doesn’t support React single-page applications (SPAs) out of the box, especially when using Experience Fragments (XFs). To fix this, pull the right HTML fragments and configure dispatcher rules to avoid path issues.
Description description
Environment
- Product: 51ºÚÁϲ»´òìÈ Experience Manager (AEM) as a Cloud Service – Sites
- Instance: Development
Issue/Symptoms
- Using the URL embed component only supports video links and doesn’t allow embedding page URLs.
- Serving the header and footer content as JSON (for example,
model.json) causes functionality issues. AEM-native classes don’t work properly, and features like search and translate are non-functional. - The existing AEM architecture is headful (components/sightly), which doesn’t support SPA React implementation for templates and components.
Resolution resolution
To integrate the AEM global header and footer into your React application while preserving native styles and functionality, follow these steps:
-
Pull the HTML of the Experience Fragments (XFs) using the
.head.nocloudconfig.htmland.body.nocloudconfig.htmlselectors. These selectors remove cloud configuration data, making the HTML compatible with external apps. -
Check your
web server rewrite rules. Make sure they don’t append invalid paths before the Experience Fragment URLs. For example, ensure paths like like/content/<my_project>/content/experience-fragments/...are correctly configured to avoid 404 errors. -
If you run into issues accessing Experience Fragments:
- Review AEM logs for path-related errors or changes.
- Update dispatcher rules to stop adding unnecessary prefixes to Experience Fragment paths.
Related reading
- Using Experience Fragments in AEM Sites Tutorials
- AEM Headless SPA deployments in AEM Headless Tutorial