Deploy using the front-end pipeline

March 23, 2025

CREATED FOR:

  • Intermediate
  • Developer
  • Admin

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

  • 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

Transcript
To avoid confusion, I am going to rename the existing deploy-to-dev pipeline as FullStack Weekend Deploy-to-Dev Pipeline and point it to the Frontend Pipeline feature branch. And I have created a brand new Frontend Weekend Deploy-to-Dev Pipeline which builds and deploys artifacts from the UI frontend module only. However, first we have to run the FullStack Weekend Deploy-to-Dev Pipeline to remove client lib files from the AEM repo and prep the AEM for frontend pipeline contract by adding sling config changes. A very important note and caution, after this FullStack Pipeline execution, you will have an unstyled or broken site, so please plan for an outage or deploy during odd hours. This is a one-time disruption you have to plan for. Finally, run the Frontend Weekend Deploy-to-Dev Pipeline to build and deploy these frontend changes directly to CDN. This time the pipeline run should be faster than the earlier FullStack Pipeline. As you can see, the text color is Adobe Red and the CSS and JS files are delivered from CDN. The resource request hostname is starting with https://static and my environment identifier. Also, to make sure there is solid isolation and no adverse effect, I have re-run the FullStack and frontend pipeline.

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