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.clientlibsbut from a new hostname starting withhttps://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.
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.
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
- 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.frontendand finally, click Save.
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).
- Finally, run the FrontEnd WKND Deploy to Dev pipeline to build only
ui.frontendmodule and deploy the front-end resources directly to the CDN.
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.cssand likewise the site.js or any other static resources that you referenced in theHtmlPageItemsConfigfile.
$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.
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.