Implementing DXL Inject® – "The Cuckoo Pattern" - Static HTML Deployment

On June 10th of this year, I wrote an article about Crownpeak's DXL Inject® pattern. In this article, I likened this deployment pattern to "a cuckoo," as it enables organizations to mimic content structures of existing applications and thereby trick them into rendering modern digital experiences upon technologies never designed for that use. By harnessing the DXL Inject® pattern, organizations can delight customers and drive massive operational efficiencies.

In this series of posts, I will show you how you can harness this differentiating capability in your Crownpeak CMS configurations.

The Test Harness

Before we begin, it's worth pointing out that FirstSpirit is a SaaS-based software platform and that our cloud service is designed to publish content from the SaaS CMS to an external hosting provider – whether that is Crownpeak-managed or each customer's own cloud or co-location services. However, to aid development for our internal teams and agency partners, Crownpeak provides Docker images that are capable of running offline. As these posts aim to show the platform's flexibility to deliver differing technologies rather than a production-quality deployment of languages/configurations, I've decided that using the Docker platform is appropriate. In real-world scenarios, customers will work with the Crownpeak team to select and configure deployment targets from FirstSprit.

To ensure I have everything I need from a Crownpeak perspective, I will build this out using a test harness based on Docker, using Docker Compose.

At this time, the Crownpeak Docker Images are not publicly available, so as I can't provide these to you, I'll create a load of diagrams and screenshots so you can see what I'm doing.

As and when Crownpeak releases publicly available Docker Images, you can fork, extend and follow along.

The Code

Crownpeak releases its demonstration site (SmartLiving) publicly on GitHub. I will use this as the basis for these posts, as it has everything I need already configured (e.g., unstructured pages, product list pages, product detail pages). However, as I extend the output configurations, I've forked the Crownpeak GitHub Repository so that you can use as much (or as little) of my example code as you'd like. My forked repository is at https://github.com/ptylr/smartliving-website.

I will update my SmartLiving repository whenever I create a new deployment language/technology type. If you pull the latest version, you'll get everything that I've released as part of this series.

Deploying Static HTML from FirstSpirit

While the vanilla version of the SmartLiving reference project https://github.com/e-Spirit/smartliving-website from Crownpeak is built to deploy static HTML, it's not configured to publish that content anywhere.

Static HTML Docker Container

To deploy static HTML, I need to add a web server into my Docker Compose configuration that will act as a target for content generation and deployment from FirstSpirit. To do this, I'll add an nginx Docker Container built up from Ubuntu 22.04 (https://hub.docker.com/r/ptylr/docker-core-nginx). Rather than configure a content transport mechanism such as FTP or rsync, I will share a volume between the FirstSpirit and nginx Docker Containers, then use FirstSpirit's local filesystem deploy option.

Here's the docker-compose.yml and a diagrammatic representation of it.

#         __          .__
# _______/  |_ ___.__.|  |_______
# \____ \   __<   |  ||  |\_  __ \
# |  |_> >  |  \___  ||  |_|  | \/
# |   __/|__|  / ____||____/__|
# |__|         \/
#
# https://ptylr.com
# https://www.linkedin.com/in/ptylr/
#
##########################################################################
version: '3'
services:
    firstspirit:
        hostname: firstspirit
        container_name: firstspirit
        build:
            context: ./firstspirit
            args:
                IMAGE_VERSION: ${IMAGE_VERSION}
        image: crownpeak/firstspirit-dev-env:${IMAGE_VERSION}
        environment:
            IMPORT_DEMO_PROJECTS: ${IMPORT_DEMO_PROJECTS}
        ports:
            - "8000:8000"
        volumes:
            - firstspirit-conf:/opt/firstspirit5/conf
            - firstspirit-data:/opt/firstspirit5/data
            - firstspirit-delivery:/var/www/static
        networks:
            - firstspirit-local-dev-environment
    delivery-nginx:
        hostname: delivery-nginx
        container_name: delivery-nginx
        build:
            context: ./delivery-nginx
        image: crownpeak/firstspirit-dev-env-delivery-nginx
        ports:
            - "8080:80"
        volumes:
            - firstspirit-delivery:/var/www/static
        networks:
            - firstspirit-local-dev-environment
networks:
    firstspirit-local-dev-environment:
        driver: bridge
volumes:
    firstspirit-conf:
    firstspirit-data:
    firstspirit-delivery:

FirstSpirit Configuration

All configurations for deploying Static HTML from our SmartLiving Project are done inside FirstSpirit's Server Manager. To get to this, browse to http://localhost:8000, login and click "Server Manager".

First, let's "Change Properties" on the SmartLiving Website Reference project and enable the "Full Deployment" Schedule entry.

We need to "Edit" the "Full Deployment" Schedule Entry and, inside the "Actions" tab, edit the "generate" action. The default "Prefix for absolute paths" is set to one designed for Crownpeak's test infrastructure. As we're using a local Docker Compose test harness, we can update this only to use HTTP (rather than HTTPS) and to reference a "localhost" address on TCP port 8080 (http://localhost:8080). Once this has been updated, we can save the configuration.

Next, we can delete the "zip all" schedule entry, as we're happy with static HTML files being created inside our shared volume.

Finally, we need to add an Action to execute the deployment. You can give this any name you choose, but I put "Deploy (Static)" so that it's clear to me which deployment action does what when we add further technologies/languages later. The path must reference the shared filesystem mount point, which is "/var/www/static" (per the Docker Compose file), and as we want to deploy content directly into this folder, we can turn off the "Attach date to directory name" flag.

With the configuration above, you can select "Full Deployment" and click "Execute" to generate and deploy static HTML content to the nginx Docker Container.

Once complete, you can browse SmartLiving by visiting http://localhost:8080/homepage/.

Conclusion

Using Docker Compose to deploy a web server such as nginx only takes a few steps to deploy static HTML content from the Crownpeak SmartLiving project.

Stay tuned for further posts on Crownpeak's DXL Inject® pattern, where I'll show you how other technologies and languages from FirstSpirit can be deployed quickly to support every digital touchpoint.