Enable front-end pipeline for standard AEM project Archetype

Last update: March 23, 2025

CREATED FOR:

  • Intermediate
  • Developer
  • Admin

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.

IMPORTANT
Generally speaking, the front-end pipeline is typically used with the AEM Quick Site Creation, there is a related tutorial Getting Started with AEM Sites - Quick Site Creation to learn more about it. So in this tutorial and associated videos you come across references to it, this is to make sure that subtle differences are called out and there is some direct or indirect comparison to explain crucial concepts.

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

video poster
Transcript
Hello everyone, let’s learn how to convert a standard AEM project created using AEM project archetype to deploy front-end artifacts via front-end pipeline for faster development-to-deployment cycle of static resources and separation of front-end deployment from full-stack backend development on AEM. You may know, Adobe Cloud Manager supports front-end pipeline which is faster than the usual full-stack pipeline but only deploys the JavaScript, CSS and static resources to style your AEM site. And the front-end pipeline is usually used in connection with the AEM QuickSight creation tool. This tool allows faster new site creation, customization of theme and styling of the AEM site. It also allows front-end developers who need zero or very minimal knowledge of AEM to work and parallel to the content creators. More info on QuickSight creation can be found under the user guide section of AEM as a Cloud Service documentation. So after the standard AEM project conversion, the front-end developers can work separately from and parallel to any full-stack and backend development on AEM which has its own deployment pipelines. It’s important to note, converting the standard AEM project to enable front-end pipeline might be unnecessary if you have infrequent front-end changes or a tightly coupled AEM development team thus limited ROI in separating development to deployment of full-stack, backend and front-end changes on AEM. It is well suited for multi-tenant or complex websites wherein tenants add components and style variations to their sites by tweaking front-end only code and have a well-laid, reusable component foundation by using the AEM proxy component pattern.
NOTE
This only applies to AEM as a Cloud Service and not for AMS-based Adobe Cloud Manager deployments.

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

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.

recommendation-more-help