In this guide, I will walk you through the process of creating a simple “Hello World” component in Adobe Experience Manager (AEM) using CRX/DE. This component will display the text “Hello World” as an H1 HTML element.

Step 1: Accessing CRX/DE

1. Open CRX/DE: CRX/DE is the development environment for AEM. Access it by navigating to your AEM instance and appending /crx/de to the URL​​.

Step 2: Creating a New Component

1. Navigate to the Components Folder: In CRX/DE, navigate to /apps/weretail/components/content. This path is where your new component will reside.
2. Create New Component: Click on the “Create” menu at the top, then select “Create Component”​​.

Step 3: Filling in the Component Details

1. Component Dialog: A popup will appear asking for details about your new component. Fill in the necessary fields such as:
   • Label: Enter a unique name for your component. (hello-world)
   • Title: Provide a user-friendly title. (Hello World)
   • Group: Give the group name as “We.Retail”. This helps in displaying this component along with other components of We.Retail project on the page.
   • Always remember to click on “Save All” menu item for any change you do in the CRX/DE.

Step 4: Adding HTML Code

1. Navigate to the Component’s HTML File: You should see the html file with the same name as the Label name which you gave above. If you see the .jsp file instead of .html, you can rename (right click or use F2) the existing .jsp extension to .html
2. Edit HTML File: Double-click to open the HTML file, delete all the existing code and enter the following code to display “Hello World” as an H1 element:

<h1>Hello World</h1>

Save the File: After adding the HTML code, save the file​​.

Step 5: Adding the Component to a Page

1. Open a Page in AEM Editor: Go to the AEM Sites console, and open a page where you want to add your new component.
2. Drag and Drop the Component: In the AEM editor, locate your new component in the side panel under the group you assigned. Drag and drop it onto your page where you want it to appear.

Step 6: Testing the Component

1. Preview the Page: After adding the component, use the “Preview” mode in the AEM editor to see how it looks on the page. You should see the “Hello World” text displayed as an H1 element on the page​​.
2. Publish the Page (Optional): If you are satisfied with how the component looks, you can publish the page to make the changes live.

Conclusion

Creating a basic “Hello World” component in AEM using CRX/DE is a straightforward process. It involves setting up the component in CRX/DE, adding the necessary HTML code, and then adding the component to a page for display. By following these steps, you can begin to familiarize yourself with the basics of component development in AEM.