Setup Website Structure setup-website-structure

CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

To setup your website, the instructions below describe the folders to create in the following locations:

  • /apps/an-scf-sandbox
    This is where custom applications and templates reside

  • /etc/designs/an-scf-sandbox
    This is where downloadable design elements reside

  • /content/an-scf-sandbox
    This is where the downloadable web pages reside

The code in this tutorial will rely on the main folder name being the same for the application, design, and content. If you choose some other name for your website, then always replace an-scf-sandbox with the name you have chosen.

NOTE
About names:
  • The names seen in CRXDE are node names which form the path to addressable content

  • Node names may contain spaces, but when used in an URI, the space must be encoded either as ‘%20’ or ‘+’

  • Node names may contain hyphens and underscores, but they must be encoded when referenced as a package name within a Java file. Both hyphens and underscores are escaped with underscore followed by their unicode value:

    • hyphen becomes ‘_002d’
    • underscore becomes ‘_005f’

Set up the Application Directory (https://experienceleague.adobe.com/apps?lang=en) setup-the-application-directory-apps

The /apps directory in the repository contains the code with implements the behavior and rendering of the pages served from the /content directory.

The /apps directory is protected and not publicly accessible as are the /content and /etc/designs directories.

  1. Create /apps/an-scf-sandbox folder.

    Using CRXDE Lite, in the explorer pane

    1. Select the /apps folder
    2. Right-click Create… or pull down the Create… menu
    3. Select Create Folder… .
    4. In the Create Folder dialog, enter an-scf-sandbox
    5. Click OK
  2. Create components subfolder.

    1. Select the /apps/an-scf-sandbox folder
    2. Click Create > Create Folder
    3. In the Create Folder dialog, enter components
    4. Click OK
  3. Create templates subfolder.

    1. Select the /apps/an-scf-sandbox folder
    2. Click Create > Create Folder
    3. In the Create Folder dialog, enter templates
    4. Click OK
    5. Re-select /apps/an-scf-sandbox
    6. Select Save All

    As with any editing process, save often. If you run into problems with entering data, it may be either because your login has timed out or you need to save previous edits.

  4. The structure in the explorer pane of CRXDE Lite should now look something like this:

    chlimage_1-44

Set up the Design Directory (https://experienceleague.adobe.com/etc/designs?lang=en) setup-the-design-directory-etc-designs

The /etc/designs directory contains the images, scripts, and stylesheets to be downloaded along with the page content.

  1. To use the Designer tool in the Classic UI, browse to https://<server>:<port>/miscadmin.

    Note: If you use CRXDE Lite to create a Node of type cq:Page, the Access Control and Replication would not be set to default settings for a page.

  2. In the explorer pane, select the Designs folder and then click New > New Page.

    Enter:

    • Title: An SCF Sandbox
    • Name: an-scf-sandbox
    • Select Design Page Template

    Click Create

    chlimage_1-45

  3. Refresh the explorer pane if “An SCF Sandbox” folder does not appear.

  4. Return to CRXDE Lite (http:// localhost:4502/crx/de) and expand /etc/designs to see the node named “an-scf-sandbox”.

    In the right, lower pane of CRXDE, you can view the Properties tab, Access Control tab and Replication tab to see what was defined using the Design Page Template.

    chlimage_1-46

Set up the Content Directory (https://experienceleague.adobe.com/content?lang=en) setup-the-content-directory-content

The /content directory in the respository is where the website content resides. The paths under /content comprise the paths of the URL for browser requests.

After the page template is created as part of the initial application, the initial page content can be created based on the template…

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6