Deploy using the front-end pipeline

In this chapter, we create and run a front-end pipeline in Adobe Cloud Manager. It only builds the files from ui.frontend module and deploys them to the built-in CDN in AEM as a Cloud Service. Thus moving away from the /etc.clientlibs based front-end resources delivery.

Objectives objectives

  • Create and run a front-end pipeline.
  • Verify that front-end resources are NOT delivered from /etc.clientlibs but from a new hostname starting with https://static-

Using the front-end pipeline

Prerequisites prerequisites

This is a multi-part tutorial and it is assumed that the steps outlined in the Update Standard AEM Project have been completed.

Ensure you have privileges to create, and deploy pipelines in Cloud Manager and access to an AEM as a Cloud Service environment.

Rename existing pipeline

Rename the existing pipeline from Deploy to Dev to FullStack WKND Deploy to Dev by going to the Configuration tab’s Non-Production Pipeline Name field. This is to make it explicit whether a pipeline is full-stack or front-end by just looking at its name.

Rename Pipeline

Also in the Source Code tab, make sure that Repository and Git Branch field values are correct and the branch has your front-end pipeline contract changes.

Source Code Configuration Pipeline

Create a front-end pipeline

To ONLY build and deploy the front-end resources from the ui.frontend module, perform the following steps:

  1. In the Cloud Manager UI, from the Pipelines section, click Add button, then select Add Non-Production Pipeline (or Add Production Pipeline) based on the AEM as a Cloud Service environment you want to deploy to.

  2. In the Add Non-Production Pipeline dialog, as part of the Configuration steps, select the Deployment Pipeline option, name it as FrontEnd WKND Deploy to Dev, and click Continue

Create Front-End Pipeline Configurations

  1. As part of the Source Code steps, select the Front End Code option, and pick the environment from Eligible Deployment Environments. In the Source Code section ensure that Repository and Git Branch field values are correct and the branch has your front-end pipeline contract changes.
    And most importantly for the Code Location field the value is /ui.frontend and finally, click Save.

Create Front-End Pipeline Source Code

Deployment sequence

  • First run the newly renamed FullStack WKND Deploy to Dev pipeline to remove the WKND clientlib files from the AEM repository. And most importantly prepare the AEM for the front-end pipeline contract by adding Sling config files (SiteConfig, HtmlPageItemsConfig).

Unstyled WKND Site

After, the FullStack WKND Deploy to Dev pipeline completion you will have an unstyled WKND Site, which may appear broken. Please plan for an outage or deploy during odd hours, this is a one-time disruption you have to plan for during the initial switch from using a single full-stack pipeline to the front-end pipeline.
  • Finally, run the FrontEnd WKND Deploy to Dev pipeline to build only ui.frontend module and deploy the front-end resources directly to the CDN.
You notice that the unstyled WKND site is back to normal and this time FrontEnd pipeline execution was much faster than the full-stack pipeline.

Verify style changes and new delivery paradigm

  • Open the WKND Site’s any page and you can see the text color us Adobe Red and the front-end resources (CSS, JS) files are delivered from the CDN. The resource request hostname starts with$HASH_VALUE$/theme/site.css and likewise the site.js or any other static resources that you referenced in the HtmlPageItemsConfig file.

Newly Styled WKND Site

The $HASH_VALUE$ here is the same as what you see in the FrontEnd WKND Deploy to Dev pipeline’s CONTENT HASH field. AEM is notified of the front-end resource’s CDN URL, the value is stored at /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content under prefixPath property.

Hash Value Correlation

Congratulations! congratulations

Congratulations, you created, ran, and verified the Front-End pipeline that only builds and deploys the ‘ui.frontend’ module of the WKND Sites project. Now your front-end team can quickly iterate on the site’s design and front-end behavior, outside of full AEM project’s life cycle.

Next steps next-steps

In the next chapter, Considerations, you will review the impact on the front-end and back-end development process.