Enable front-end pipeline for standard AEM project Archetype enable-front-end-pipeline-standard-aem-project
Learn how to enable the AEM WKND Sites Project (aka Standard AEM Project) created using AEM Project Archetype to deploy front-end resources such as CSS, JavaScript, Fonts, and Icons using a front-end pipeline for a faster development-to-deployment cycle. The separation of front-end development from full-stack back-end development on AEM. You also learn how these front-end resources are not served from the AEM repository but from the CDN, a change in delivery paradigm.
A new front-end pipeline is created in Adobe Cloud Manager that only builds and deploys ui.frontend
artifacts to the built-in CDN and informs AEM about its location. On AEM during the webpage’s HTML generation, the <link>
and <script>
tags, refer to this artifact location in the href
attribute value.
However, after the WKND Sites AEM project conversion, the front-end developers can work separately from and parallel to any full-stack back-end development on AEM, which has its own deployment pipelines.
A related multi-step tutorial walks through implementing an AEM site for a fictitious lifestyle brand the WKND using the Quick Site Creation feature. Reviewing the Theming workflow to understand the front-end Pipeline workings is also helpful.
Overview, benefits, and considerations for front-end pipeline
Prerequisites
The deployment step in this tutorial takes place in an Adobe Cloud Manager, ensure that you have a Deployment Manager role, see Cloud Manage Role Definitions.
Make sure to use the Sandbox program and Development environment when completing this tutorial.
Next steps next-steps
A step-by-step tutorial walks through the AEM WKND Sites Project conversion to enable it for the front-end pipeline.
What are you waiting for? Start the tutorial by navigating to the Review Full-stack Project chapter and recap the front-end development life cycle in the context of the standard AEM Sites Project.