AEM Basic Project Setup Tutorial

The purpose of this tutorial is to show you how to set up a basic project structure in AEM. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this project for learning purposes.

For this tutorial I was using AEM 6.0. You should be able to follow along with other versions of this software.

Lets get started.

1. Once your instance of AEM is up and running, navigate to crxde lite. Right click on the “apps” folder and choose “Create Folder”. An example is posted below:
   
   

2. Now right click on the "myProject" folder and choose "Create Folder". You will want to create the following folders under the "myProject" folder.

• components
• page
• install
• src
• templates

3. Your folder structure should look like this when you are done:


4. Now we will create the page component. Right click on the "page" folder that you created and choose "Create Component". An example is posted below:


Keep clicking the "Next" button until you can click the "OK" button to create the component.

Note: In AEM 6, you have to specify the "Super Type" for the page component, otherwise it will not show up in the template list. This was not required in previous versions.

5. Open the JSP file that was just created with your component and replace the code inside with the following:

6. Now we need to create a template that will display the page component. Right click on the templates folder and choose “Create Template”. An example is posted below:
   
   

Click the "Next" button. Click the "+" icon on Allowed Paths and enter the following value: /content(/.*)?. Then keep clicking the "Next" button until you can click the "OK" button to create the template.

7. Make sure you save everything and then head over to the site admin console to create a new web page. Click on "Websites", click the "New..." drop down button, and then choose "New Page". In the window that pops up, make sure you choose the "Simple Page Template" and type in the following title - My Site.

8. Finally, open up the new page you just created. All you should see is a simple parsys component that will let you add components to the page.

You now have a sample project setup that you can use to start creating your first AEM web site. You can use this sample project as a starting point in any of the tutorials on this blog.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: AEM-Getting-Started.