Documentation AEM AEM Tutorials AEM Sites WKND Tutorials

Deploy using the front-end pipeline

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 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

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

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 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:

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.
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

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

WARNING

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.

IMPORTANT

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 https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$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

TIP

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.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9