How does the frontend pipeline deploy changes on cloud?

[lavishvasuja]

Hi all,

I’m trying to understand how frontend pipelines deploy changes in a cloud environment. Specifically:

• What is the typical flow of deploying frontend code to the cloud?

• How are build and deployment steps generally handled?

Any explanations, examples, or diagrams would be greatly appreciated.

Thanks!

[giuseppebaglio]

hi @lavishvasuja,

The front-end pipeline focuses on the ui.frontend module, moving frontend assets away from the older /etc.clientlibs delivery method and instead deploying them directly.

Deployment Flow:

• Developers make frontend code changes locally (CSS, JS, static resources).

• These changes are committed to a Git repository in a frontend-specific location (like /ui.frontend).

• In Cloud Manager, a front-end pipeline is created/used, which is configured to build only the frontend module and deploy the static assets.

• The frontend pipeline builds the frontend code using tools like npm or Maven in the configured build environment.

• After successful build, the assets are deployed to the CDN linked with the AEM Cloud Service environment.

• The site in AEM fetches these frontend assets from the CDN instead of local AEM clientlibs.

Build and Deployment Steps:

• Frontend code is isolated in the repository under a frontend module.

• Cloud Manager front-end pipelines are configured with source code location (/ui.frontend) and environment details.

• The build step compiles and packages frontend resources.

• The deployment step pushes these static assets to the built-in CDN serving the AEM site.

• This pipeline runs independently but in coordination with full-stack pipelines that handle backend code and configurations.

• Initial pipeline runs may remove or prepare legacy clientlibs and configuration nodes for compatibility with the new delivery method.

• The frontend pipeline delivers fast deployments as it only handles UI static resources, enabling frontend teams to work parallel without backend dependencies.

Here you have lots of official references with videos and images to help:

• Deploy using the front-end pipeline
• Set up Your Pipeline 
• Enabling the Front-End Pipeline 
• Develop Sites with the front-end pipeline 

[muskaanchandwani · Accepted solution]

Hello @lavishvasuja 

How frontend pipelines typically deploy changes in an AEMaaCS Environment :

1. Frontend developer customizes static code - Updates are made to CSS, JavaScript, images, and other assets in a dedicated module/folder (e.g., /ui.frontend).

2. Code is committed to Git - Changes are pushed to a feature/dev branch in a cloud-managed repository.

3. Cloud Manager Pipeline is triggered - The pipeline runs automatically (on commit) or manually.

4. Build step - Pipeline runs the build script (commonly npm run build) for the frontend project.

5. Static files generated - Build artifacts (from the dist folder) are produced.

6. Deploy step - Static files are uploaded to a CDN (outside of the AEM instance).

7. Site references are updated - AEM updates URLs to serve the new static resources.

8. No backend code deployed - This pipeline only handles frontend resources (CSS, JS, static assets) - not page content or backend code.

9. Fast and isolated - Changes via frontend pipeline are faster and independent of backend deployments.

For guides and implementation examples, see:
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/administer...

[tatvam]

In simple terms one would think that the ui.frontend module might be just built and deployed.

But cloud manager does not execute a profile for example like autoInstallPackage(Publish or similar) to deploy packages. It separately builds the packages and deploys separately.

Best option is to go to cloud manager and download the build log and trace the actual build and deploy steps that was carried out for your specific build