AEMaaCS : Use Front End Pipeline from full stack pipeline

[narendiran100]

We are currently using a full-stack pipeline to deploy our codebase in a cloud environment. The pipeline takes approximately 3 hours to complete. To reduce deployment time, we are considering splitting the frontend (FE) code and using a separate frontend pipeline for deployment. Has anyone had experience with this approach, and if so, could you share your insights or best practices?

[rampai · Accepted solution]

Hi @narendiran100 ,

Frontend pipeline can save a significant amount of time w.r.t deployments with average time to deploy coming down to minutes instead of hours.

Best practices:

1. You can use something like a turborepo along with Webpack, so that you can scale it across multiple tenants and also utilize remote caching feature of the same so that only module that has changed is rebuilt.
2. You will have to do minification and compression during the frontend build as the artifacts are directly deployed to Frontend CDN and AEM client library is no longer in the picture.
3. If you are using a custom CDN (BYOCDN), then you can add "customFrontendPrefix" property to the SiteConfig to customize your frontend URL as per your requirements.

While the Front-End Pipeline in Adobe Experience Manager (AEM) offers several benefits, there are also some limitations and potential drawbacks to consider:

1. Deployment Mistakes: There can be deployment mistakes such as applying a front-end module to the wrong site or creating multiple front-end modules that apply to the same site, which would overwrite each other.

2. Pipeline Restrictions: There are certain restrictions on the pipelines. For instance, a user must be logged in with the Deployment Manager role to configure or run pipelines. At any time, there can only be one full-stack pipeline per environment.

3. Dependency on Roles: The pipeline may stop with a failure if issues are accepted during the process. A deployment manager, project manager, or business owner can either override the issues, in which case the pipeline proceeds, or they can accept the issues, in which case the pipeline stops with a failure. 

4. Concurrency Limitations: A user with the Deployment Manager role can create and run multiple front-end pipelines concurrently. However, there is a maximum limit of 300 pipelines per program (across all types).

Remember, these limitations do not necessarily make the Front-End Pipeline a bad choice. They are just factors to consider when deciding whether this approach is the right fit for your specific needs and circumstances.

Refer official docs for the migration or setup: Enable front-end pipeline for standard AEM project Archetype | Adobe Experience Manager

[narendiran100]

Thanks for your answer. In the documentation, the generated theme has only one JS and CSS file site.js and site.css. Is it possible to define multiple files in ui.frontend module as we have with clientlibs?

[rampai]

Yes @narendiran100 . It is possible to define multiple paths relative to how you have it in the dist folder and the order in which the files will be called is as per your HTMLConfig.