This series of articles aims to help you start with Adobe AEM (aka CQ5) development. I will demonstrate how to implement the following using AEM 5.6:

• Setup a new CQ application/site
• Create a CQ Template
• Create a Page rendering Component
• Create Pages in CQ

Setup a new CQ application/projects

CQ application comprises of elements like Templates, Components, OSGi bundles and static files. All these elements are grouped together to form a application or a project and are stored at a specific location with in JCR repository. Most often, new projects are created under the /apps directory. Adobe suggests to set up a following folder structure:

/apps/ – Contains for your application
/apps//components – Container for all the components in a CQ application. Create child folders to organise the components further.
/apps//templates – Container for all the templates in a CQ application
/apps//src – OSGi bundle build structure
/apps//install – Compiled OSGi bundle container

Here are the steps to create the recommended folder structure:

1. Login to your CQ environment and go to CRXDE Lite (Ex: www.your-domain.com/crxde)
2. Right click on /apps folder and select “Create Folder”
2. Enter the name of your application/project “awesomeapp” in create folder dialog.
3. Create child folders under “awesomeapp” and name them as “components”, “templates”, “src” and “install”.

Final folder structure should look like the one shown in the image below:

Always organize your components and templates in a way that that best suited for your project and most importantly allows you to easily maintain them.