Any AEM Frontend developer is aware that in AEM, the frontend can become a developer's nightmare if this is not done correctly.

This article will guide you through the steps of creating an effective, developer and production-friendly build system that can be expanded and scaled as you wish.

I'll let the "bla bla" part and let's directly get started:

First, let's have a look at the project structure:

project structure image

Let's take a look into that root pom.xml file, where we define Node and NPM installation, using Maven Frontend Plugin:

frontend maven plugin pom xml definition

We will have 3 execution profiles defined in ui.apps/pom.xml like so:

  • development - a profile that does exactly what it says, it starts a development profile that uses sourcemaps and live browser refresh on the AEM instance. This will empower all developers to speed up all the processes and deliver faster to the business

development profile image

  • dev-env - this profile should be used in QA environments, where developers and the QA team are testing the newly implemented features. This will generate the sourcemaps and all the JS and CSS files will NOT be minified and optimized for the ease of debugging possible integration problems. This profile should NOT be used for performance testing.

development environment profile

  • production - this profile will deliver the fully optimized versions of the JS and CSS files. If you want to do performance testing this is the profile that you need. This will run also for production and it's the activeByDefault profile.

production profile image

Now we are prepared for any given situation or deployment and we can configure the CI pipelines to run the needed profile for the given environment.

Great job! Stay tuned for the next article in our process to set up the dream frontend build system in AEM! :)

Note: All the code related to this article can be found here.