AEM Headless quick setup for AEM as a Cloud Service

The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs.

Prerequisites

The following are required to follow this quick setup:

  • AEM as a Cloud Service Sandbox environment (preferably Development)
  • Access to AEM as a Cloud Service and Cloud Manager
    • AEM Administrator access to AEM as a Cloud Service
    • Cloud Manager - Deployment Manager access to Cloud Manager
  • The following tools must be installed locally:

1. Create a Cloud Manager Git repository

First, create a Cloud Manager Git repository which is used to deploy the WKND Site. The WKND Site is a sample AEM website project that contains content (Content Fragments) and a GraphQL AEM endpoint used by the quick setup’s React App.

Screencast of steps

  1. Navigate to https://my.cloudmanager.adobe.com
  2. Select the Cloud Manager Program that contains the AEM as a Cloud Service environment to use for this quick setup
  3. Create a Git repository for the WKND Site project
    1. Select Repositories in the top navigation
    2. Select Add Repository in the top action bar
    3. Name the new Git repository: aem-headless-quick-setup-wknd
      • Git repository names must be unique per Adobe organization,
    4. Select Save, and wait for the Git repository to initialize

2. Push sample WKND Site project to Cloud Manager Git Repository

With the Cloud Manager Git repository created, clone the WKND Site project’s source code from GitHub and push it to Cloud Manager Git repository. Now Cloud Manager to access, and deploy the WKND Site project to the AEM as a Cloud Service environment.

Screencast of steps

  1. From the command line, clone the sample WKND Site project’s source code from GitHub

    $ mkdir -p ~/Code
    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  2. Add the Cloud Manager Git repository as a remote

    1. Select Repositories in the top navigation

    2. Select Access Repo Info from the top action bar

    3. Execute command found in Add a remote to your Git repository from the command-line

      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
      
  3. Push the sample project’s source code from your local Git repository to the Cloud Manager Git repository

    $ git push adobe main:main
    

    When prompted for credentials, provide the Username and Password from Cloud Manager’s Repository Info modal.

3. Deploy the WKND Site to AEM as a Cloud Service

With the WKND Site project pushed to the Cloud Manager Git repository, it cannot be deployed to AEM as a Cloud Service using Cloud Manager pipelines.

Keep in mind, the WKND Site project provides sample content that React app consumes over AEM Headless GraphQL APIs.

Screencast of steps

  1. Attach a Non-production deployment pipeline to the new Git repository
    1. Select Pipelines in the top navigation
    2. Select Add Pipeline from the top action bar
    3. On the Configuration tab
      1. Select Deployment Pipeline option
      2. Set the Non-Production Pipeline Name to Dev Deployment pipeline
      3. Select Deployment Trigger > On Git Changes
      4. Select Important Metric Failures Behavior > Continue Immediately
      5. Select Continue
    4. On the Source Code tab
      1. Select Full Stack Code option
      2. Select the AEM as a Cloud Service development environment from the Eligible Deployment Environments select box
      3. Select aem-headless-quick-setup-wknd in the Repository select box
      4. Select main from the Git Branch select box
      5. Select Save
  2. Run the Dev Deployment Pipeline
    1. Select Overview in the top navigation
    2. Locate the newly created Dev Deployment pipeline in the Pipelines section
    3. Select the to the right of the pipeline entry
    4. Select Run, and confirm in the modal
    5. Select the to the right of the now-running pipeline
    6. Select View details
  3. From the pipeline execution’s details, monitor progress until it successfully completed. Pipeline execution should take between 30-40 minutes.

4. Download and run WKND React app

With AEM as a Cloud Service bootstrapped with the content from the WKND Site project, download, and start the sample WKND React App that consumes the WKND Site’s content over AEM Headless GraphQL APIs.

Screencast of steps

  1. From the command line, clone the React App’s source code from GitHub.

    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Open the folder ~/Code/aem-guides-wknd-graphql/react-app in your IDE.

  3. In the IDE, open the file .env.development.

  4. Point to the AEM as a Cloud Service Publish service’s host URI from the REACT_APP_HOST_URI property.

    REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
    ...
    

    To find your AEM as a Cloud Service Publish service’s host URI:

    1. In Cloud Manager, select Environments in the top navigation
    2. Select Development environment
    3. Locate the Publish Service (AEM & Dispatcher) link Environment Segments table
    4. Copy the link’s address, and use it as the AEM as a Cloud Service Publish service’s URI
  5. In the IDE, save the changes to .env.development

  6. From the command line, run the React App

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  7. The React App, running locally, starts on http://localhost:3000 and displays a listing of adventures, which are sourced from AEM as a Cloud Service using AEM Headless’ GraphQL APIs.

5. Edit content in AEM

With the sample WKND React App connecting to and consuming content from the AEM Headless GraphQL APIs, author content in AEM Author service and see how the React App’s experience updates in concert.

Screencast of steps

  1. Log in to AEM as a Cloud Service Author service

  2. Navigate to Assets > Files > WKND Shared > English > Adventures

  3. Open the Cycling Southern Utah Folder

  4. Select the Cycling Southern Utah Content Fragment, and select Edit from the top action bar

  5. Update some of the fields of the Content Fragment, for example:

    • Title: Cycling Utah's National Parks
    • Trip Length: 6 Days
    • Difficulty: Intermediate
    • Price: 3500
    • Primary Image: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
  6. Select Save in the top action bar

  7. Select Quick Publish from the top action bar’s

  8. Refresh the React App running on http://localhost:3000.

  9. In the React App, select the now updated Cycling adventure, and verify the content changes made to the Content Fragment.

  10. Using the same approach, in AEM Author service:

    1. Unpublish an existing Adventure Content Fragment, and verify it is removed from the React App experience
    2. Create and publish a new Adventure Content Fragment, and verify it appears in the React App experience
    TIP

    If you are unfamiliar with creating and publishing new, or unpublishing existing Content Fragments, watch the screencast above.

Congratulations!

Congratulations! You’ve successfully used AEM Headless to power a React App!

To understand in detail how the React App consumes content from AEM as a Cloud Service, check out the AEM Headless tutorial. The tutorial explores how Content Fragments in AEM as created, and how this React App consumes their content as JSON.

Next Steps

On this page