AEM Component Library

[JakeCham]

How to check AEM component library components functionalities in our local.

There are components we have developed already and we need to check there are component in AEM component library using those can we accomplish the same features. for that any way to get aem component library into our local? and also for component library version how we can check ?

[BrianKasingli · Accepted solution]

@JakeCham 

There's no AEM component library that ships for free against your organisations custom components, however, you can use the Components Console from AEM. Simply navigate to main navigation > tools > general > components (http://localhost:4502/libs/wcm/core/content/sites/components.html). 

The Components Console will be able to show you details, policies, and live usage of how the component is being used.

If your component has a README.MD detailed information can be exposed in the Components Console, take a look at the AEM V2 WCM Core Components Breadcrumb, http://localhost:4502/apps/core/wcm/components/breadcrumb/v2/breadcrumb/README.md.

Click here to see how to use the Component's Console - https://sourcedcode.com/blog/aem/how-many-times-is-an-aem-component-used-in-the-jcr#components-conso...

If you wish to build a components library that looks something like this, https://www.aemcomponents.dev/, you would need to re-create a New AEM site that has a single responsibility, which is to showcase your organizations custom components with its details.

When you are building components, a website like this will not be automatically generated, https://www.aemcomponents.dev

A component library is nothing but an AEM site that showcases components. In the example of https://www.aemcomponents.dev., the components showcased are AEM WCM Core Components. You can definitely use these components to speed up your AEM development.

[JakeCham]

Could you please explain below phrase u wrote "There's no AEM component library that ships for free against your organisations custom components".There are core components in which component group is .core-wcm.So can't we get them into our own group ?

[BrianKasingli]

For example, this is a completed AEM component library, https://www.aemcomponents.dev.

[BrianKasingli]

When you are building components, a website like this will not be automatically generated, https://www.aemcomponents.dev

[JakeCham]

Correct me if iam wrong what i got is using component library we can get an idea of some components thought we have to build those component by our own ? we cant use them for free even we have the adobe licence

[BrianKasingli]

A component library is nothing but an AEM site that showcases components. In the example of https://www.aemcomponents.dev., the components showcased are AEM WCM Core Components. You can definitely use these components to speed up your AEM development.

[kalyan_venkat]

@JakeCham  As per my understanding you are looking for site https://www.aemcomponents.dev/ in your local so that you can play with it and replace your custom component with core components, if that is the case. Do the following

1. Navigate to core components github repo 
2. Download sources with all in its package name (core.wcm.components.all-2.11.0.zip)
3. Install it using package manager
4. Navigate to sites to see the pages

[Vijayalakshmi_S]

Hi @JakeCham,

In order to understand the behavior of core components in your local, below are the ways

• Create project using AEM Maven Project Archetype which ships with core components and proxy components created inheriting from core.
  • Proxy pattern help facilitate the use of the core as is or overwrite specific files per the need. 
• Alternatively you can directly install the latest core components package -> Create a proxy component out of it -> Author it in site pages.

Creating proxy component  :

Create node of type - cq:Component -> Add below properties

sling:resourceSuperType -> core/wcm/components/breadcrumb/v2/breadcrumb 

jcr:title -> My project breadcrumb

componentGroup -> My project

Related link for reference :

• https://docs.adobe.com/content/help/en/experience-manager-core-components/using/get-started/using.ht...
• https://docs.adobe.com/content/help/en/experience-manager-core-components/using/developing/archetype...