/aem-react-core-wcm-components

Primary LanguageTypeScriptApache License 2.0Apache-2.0

AEM WCM Core Components - React implementation

The React implementation for AEM core components. Provides either ready to use / extend components, or if you choose to write your own, a good reference to get started.

Welcome

Usability Study 2020

We're conducting a usability study by using the System Usability Scale, a reliable tool to measure the perceived usability.
Please help us making the Core Components better by responding to our short usability questionnaire. Thank you!

Documentation

TBD

Features

TBD

Template Components

  1. Navigation
  2. Language Navigation
  3. Breadcrumb

Page Authoring Components

  1. Title
  2. Text
  3. Image
  4. Button
  5. Teaser
  6. Download
  7. List
  8. Separator
  9. Progress Bar
  10. Experience Fragment (demo)

Container Components

  1. Container
  2. Carousel
  3. Tabs
  4. Accordion

Form Components

Not suported

Roadmap

TBD

Usage

To include the Core Components in a new project, we strongly advise to use the AEM Project Archetype; this guarantees a starting point that complies to all recommended practices from Adobe.

For existing projects, take example from the AEM Project Archetype by looking at the core.wcm.components references in the main pom.xml, in all/pom.xml, and in ui.apps/pom.xml. For the rest, make sure to create Proxy Components, to load the client libraries and to allow the components on the template, as instructed in Using Core Components.

System Requirements

Core Components AEM as a Cloud Service AEM 6.5 AEM 6.4 Java SE Maven
2.11.1 Continual 6.5.5.0+ 6.4.8.1+ 8, 11 3.3.9+

For the requirements from previous Core Component releases, see Historical System Requirements.

The Core Components require the use of editable templates and do not support Classic UI nor static templates. If needed, check out the AEM Modernization Tools.

Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM.

Building

To compile your own version of the React Core Components, you can build and install everything on your running AEM instance by issuing the following command in the top level folder of the project:

Cloud:

mvn clean install -PautoInstallPackage -PautoInstallSinglePackage

6.5.5+:

mvn clean install -PautoInstallPackage -PautoInstallSinglePackage -Pclassic

Important: It is known that the core components examples package removes the examples installed in this package due to their package filter. This needs to be addressed later.

You can also install individual packages/bundles by issuing the following command in the top-level folder of the project:

mvn clean install -PautoInstallPackage -pl <project_name(s)> -am

Note that:

  • -pl/-projects option specifies the list of projects that you want to install
  • -am/-also-make options specifies that dependencies should also be built

For convenience, the following deployment profiles are provided when running the Maven install goal with mvn install:

  • autoInstallSinglePackage: Install everything to the AEM author instance.
  • autoInstallSinglePackagePublish: Install everything to the AEM publish instance.
  • autoInstallPackage: Install the ui.content and ui.apps content packages to the AEM author instance.
  • autoInstallPackagePublish: Install the ui.content and ui.apps content packages to the AEM publish instance.

The hostname and port of the instance can be changed with the following user defined properties:

  • aem.host and aem.port for the author instance.
  • aem.publish.host and aem.publish.port for the publish instance.

Server Side Rendering demo

To enable server side rendering demo on the SPA demo site, simply:

  • Make sure you executed the full build at least 1 time
  • Go to the module react-spacomponents-example-project-directory in your CMD
  • Make sure port 4200 is free.
  • Execute either "npm run server" (simple server start) "npm run aemsync-ssr" (code sync to AEM with SSR restart)
  • Your react pages should now render with server side rendering.

You can deploy the files from dist/serverBuild to your nodeJS, adobeIO or AWS lambda instance and change your rendering endpoint in OSGI to render from the cloud. See: com.adobe.cq.wcm.core.examples.react.components.ssr.impl.SSRRenderingServiceImpl.Configuration

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.