This version is still in development and is not considered stable yet. For the latest stable version, please use StreamX Guides 1.1.0!

Serve dynamic content with StreamX and AEM

In this tutorial, you will learn how to create a Dynamic Carousel Component that displays data coming from StreamX.

You will use Apache Dispatcher with the SSI module enabled to make the Carousel Component dynamic, allowing it to display frequently changing data without the need for cache invalidation.

This tutorial covers the following topics:

  • AEM and Dispatcher setup by using AEM Compose

  • Running the StreamX Mesh

  • Building new Dynamic Carousel Component on AEM

  • Feeding the StreamX Mesh with data by using StreamX CLI

Prerequisites

Verify if no other application uses ports 80, 4502 and 4503 (AEM ports) and 8081 (StreamX REST Ingestion port)

Step 1: Get the sources

Clone the Git repository containing source files for the example:

git clone https://github.com/streamx-dev/streamx-docs-resources.git

Step 2: Set up AEM, dispatcher and WKND project

  1. Open the terminal and go to serving-dynamic-content-aem-tutorial inside the cloned project directory.

  2. Copy your AEM 6.5 installation file the license file and the Service Pack package to the [cloned-repository-path]/serving-dynamic-content-aem-tutorial/aem/home/lib directory.

  3. Download the WKND classic project package from the official Adobe GitHub site and copy it to the [cloned-repository-path]/serving-dynamic-content-aem-tutorial/aem/home/lib directory.

  4. Set up your AEM stack by executing the following command:

    sh taskw setup
    Be patient, the initial setup might take some time to create author, publish and dispatcher instances, install the Service Pack and the WKND project provided by Adobe. Once it’s done you can verify the setup by visiting http://publish.aem.local/, where you should see the WKND landing page.

    setup command must be run only once. When you finish you can stop AEM stack and start again:

    sh taskw stop
sh taskw start

Step 3: Run the StreamX Mesh

  1. Open the terminal and go to serving-dynamic-content-aem-tutorial inside the cloned project directory.

  2. Run the StreamX Mesh by using the following command:

    streamx run

  3. Wait for the following output:

    -------------------------------------------------------------------
STREAMX IS READY!
-------------------------------------------------------------------
...
-------------------------------------------------------------------
Network ID:
...
Mesh configuration file: ./mesh.yaml
-------------------------------------------------------------------

Step 4: Feed the StreamX Mesh

You must inform the StreamX Mesh how to generate the content for the new component.

Remember to run streamx commands from the same folder, since they rely on relative paths.

  1. Let’s publish the renderer of the component that has HTML content with some placeholders to be filled by StreamX when data arrives.

    streamx publish -s 'template.bytes=file://templates/carousel.html' renderers carousel.html

  2. Publish the context with all required information about what and how it should be generated.

    streamx publish -j 'file://context/fragments-rendering-context.json' rendering-contexts fragments-rendering-context

  3. Add some sample adventure data to StreamX by executing the following 3 commands:

    streamx publish -s 'content.bytes=file://adventure/adventure_1.json' data adventure:1
    streamx publish -s 'content.bytes=file://adventure/adventure_2.json' data adventure:2
    streamx publish -s 'content.bytes=file://adventure/adventure_3.json' data adventure:3

  4. Visit http://localhost:8081/published/wknd/_fragments/collected:adventure:cheapest-by-activity:Cycling.carousel.html in any web browser, and verify that the three published adventures are present, though without styles.

Let’s break down the URL:

  • localhost:8081 is where the StreamX Web Delivery Service listens for requests.

  • /published/wknd/_fragments/ is the base prefix for carousel fragments.

  • collected:adventure:cheapest-by-activity:Cycling refers to:

    • an aggregated dataset, in this example, the cheapest adventures grouped by activity: collected:adventure:cheapest-by-activity

    • with the key, in this example, category: Cycling.

  • .carousel.html is the suffix for carousel fragments.

Step 5: Create dynamic carousel component

  1. Create the component

    • Log in to AEM author with default credentials admin/admin.

    • Visit AEM author - CRXDE - /apps/wknd/components.

    • Right-click on the components node and select Create ... / Create Component.

    • Fill in the following properties:

      • Label: dynamicadventurecarousel

      • Title: Dynamic Adventure Carousel

      • Group: WKND

    • Save your changes.

  2. Replace component’s template

    • Rename dynamicadventurecarousel/dynamicadventurecarousel.jsp to dynamicadventurecarousel/dynamicadventurecarousel.html and save the changes.

    • Replace node’s content with the following snippet:

      <sly data-sly-test="${wcmmode.disabled}">
    <!--#include virtual="/published/wknd/_fragments/collected:adventure:cheapest-by-activity:Cycling.carousel.html" -->
</sly>
<sly data-sly-test="${!wcmmode.disabled}">
    Adventure carousel's content will be injected by Dispatcher through SSI.
</sly>

    • Right-click on the newly created dynamicadventurecarousel node and select Create ... / Create Dialog with just the defaults.

    • Save your changes again.

  3. Activate the component

Step 6: Add the component to the page

  1. Visit the AEM author - EN Blueprint page.

  2. Add a new Dynamic Adventure Carousel component above the already existing built-in carousel inside the container.

  3. Use the Rollout Page option from the page action bar.

  4. Visit AEM author - US EN page.

  5. Use the Publish Page option from the page action bar.

  6. Visit http://publish.aem.local/content/wknd/us/en.html in any browser (it might take some time for AEM to compile all the client libraries if you are visiting a WKND page for the first time), and you should see a fully functional carousel with 3 adventures, which is shown on the image below.

    image
    Figure 1. Dynamic Adventure Carousel

If you examine the order of the items within the carousel, you will notice that they are ordered by price in ascending order, exactly the way our StreamX Mesh was configured.

Step 7: Update dynamic content

  1. Add the fourth adventure (with the lowest price) by executing:

    streamx publish -s 'content.bytes=file://adventure/adventure_4.json' data adventure:4

  2. Visit http://publish.aem.local/content/wknd/us/en.html again. Verify that:

    • The new adventure is located at the first place.

    • Other adventures are moved to the right (so the previous 3rd adventure is no longer available in the carousel, due to the StreamX Mesh configuration).

Summary

Congratulations! You have just built and validated a new AEM component, which is able to dynamically load adventure information from StreamX.

Related content

Dispatcher configuration

  • Allow SSI in conf.d/enabled_vhosts/we-retail_publish.vhost

    Options +Includes
AddOutputFilter INCLUDES .html

  • Prevent product carousel fragment URLs from being rewritten in conf.d/rewrites/we-retail_rewrite.rules

    RewriteCond %{REQUEST_URI} !^/published/weretail/_fragments

  • Allow proxying requests for product carousel fragments toward StreamX in conf.d/proxy/streamx.proxy

    ProxyPassMatch "^/(.*/_fragments/.*\.carousel\.html)$" "http://host.docker.internal:8081/$1"