AEM Webpack Example

This project demonstrates a proven practice for setting up Webpack in AEM. It provides a straightforward Webpack configuration that supports Babel, JavaScript and CSS linting, and JavaScript testing. It is part of the setup Bounteous introduced to some major AEM customers.

Why Webpack in AEM?

AEM might be the best system for content and user experience management. It provides reliable tools that power some of the biggest websites and that Java developers enjoy working with.

However, your front end developers are probably not happy with it and waste precious time. Why? AEM's out-of-the-box tools can't keep up with the rapid advances in the front end world.

Webpack in AEM improves front end development because...

• It allows using the latest JavaScript standards without breaking clientlibs and AEM's built-in compression libraries.
• It promotes modular and reusable code. You can import modules, variables and files using JavaScript and tie it to an AEM component. This results in code that's easier to maintain, which saves time and $$$.
• It can be extended easily and supports the integration of ~600.000 npm modules.
• It can automatically prefix CSS for better cross-browser compatibility, ensure consistent code style, and automate most tasks you can think of.
• It even allows writing tests for JavaScript.

Let's make AEM fun for everyone.

Integrate Webpack into AEM

Before you start, you might want to read the blog post "How does Webpack fit into AEM?" to get a general idea of some concepts that are implemented in AEM Webpack Example.

The structure of this project mirrors Adobe's Project Archetype. To get started, you can either set up a new project using the archetype, or you use your existing project. Then follow the step-by-step summary below. Each step links to a folder containing a README file with more instructions. Make sure you read those for detailed instructions of each aspect.

1. Copy the example Webpack folder, .browserslistrc and .gitignore to ui.apps/src/main.
2. Extend your project's pom.xml.

This is already enough to run the project's Maven build and Webpack. Try it now! Then you want to modify a few more things:

3. Customize the webpack.project configuration.
4. Use the generated files on your page, for example by including them in a clientlib.
5. Add a webpack.resolve folder for reusable code.

Demo

Video summary:

• Automatically watch JavaScript and SCSS changes
• See what happens if CSS violates a Stylelint rule
• See what Autoprefixer does to your CSS

Concepts

Concept	Description
One webpack.module folder per component	This is where developers define component-specific JavaScript and SCSS.
One webpack.core folder	This is where core tools of this framework are defined. Avoid touching this folder to make future upgrades easier. All you might want to change in this folder is the package.json file in order to update NPM dependencies and scripts. We're aware that the configuration isn't ideal and doesn't satisfy everyone's needs, so we encourage you to raise questions and open issue tickets for further discussion.
One webpack.project folder	Here lives the configuration for a project, allowing you to override and extend defaults defined in webpack.core.
One webpack.resolve folder	Webpack takes this folder and resolves its content for easy imports into JS and SCSS files. See webpack.resolve.
One webpack.bundle folder	Every entry file defined in webpack.project results in one output file that gets stored in this folder.

Toolbox

AEM Webpack Example supports the following tools out-of-the-box:

• Maven integration using frontend-maven-plugin.
• Webpack.
• AEM Front to auto-push changes into AEM and reload the browser window.
• CSS/SCSS.
• Babel. JavaScript compilation using Babel's recommended env preset.
• ESLint. Linting for JavaScript.
• Stylelint. Linting for CSS/SCSS.
• Autoprefixer. Prefixes CSS/SCSS to improve cross-browser compatibility.
• Jest. Testing for JavaScript.

Who we are

Bounteous creates big-picture digital solutions that help leading companies deliver transformational brand experiences.

Founded in 2003 in Chicago, Bounteous creates big-picture digital solutions that help leading companies deliver transformational brand experiences. Our expertise includes Strategy, Experience Design, Technology, Analytics and Insight, and Marketing. Bounteous forms problem-solving partnerships with our clients to envision, design, and build their digital futures.

We're hiring!

And we are the AEM and front end experts you've been looking for. Meet us.