vite-plugin-aem-clientlib

A Vite plugin that generates Adobe AEM–compatible clientlibs from your built Vite assets.

It handles:

• Copying JS, CSS, images, fonts, source maps into AEM clientlibs folder
• Creating .content.xml, js.txt, and css.txt automatically
• Rewriting sourceMappingURL comments in JS/CSS
• Optional cleanup of previous build output

🚀 Install

npm install --save-dev vite-plugin-aem-clientlib

🛠 Usage

In your vite.config.js

import { defineConfig } from 'vite';
import aemClientlibPlugin, { rewriteAssetFilePaths } from 'vite-plugin-aem-clientlib';

export default defineConfig(({ mode }) => ({
  base: '',
  build: {
    outDir: 'dist',
    sourcemap: mode !== 'production',
    rollupOptions: {
      input: './src/main.js',
      output: rewriteAssetFilePaths()
    }
  },
  plugins: [
    aemClientlibPlugin({
      name: 'your-clientlib',
      path: '../ui.apps/src/main/content/jcr_root/apps/your-site/clientlibs/your-clientlib',
      includeMaps: mode !== 'production',
      dependencies: ['core-clientlib'],
      embed: ['shared-ui']
    })
  ]
}));

🔧 Plugin Options

| Option | Type | Required | Description | | -------------- | ---------- | -------- | ------------------------------------------------------------------------------------------ | | name | string | ✅ | Clientlib name (used in .content.xml) | | path | string | ✅ | Full local path to your AEM clientlib folder | | js | string | ❌ | Subfolder name for JS files (default: 'js') | | css | string | ❌ | Subfolder name for CSS files (default: 'css') | | assets | string | ❌ | Subfolder under resources/ for assets like fonts/images (default: 'assets') | | includeMaps | boolean | ❌ | Whether to copy source map files and rewrite sourceMappingURL comments (default: true) | | clean | boolean | ❌ | If true, deletes the target clientlib folder before writing (default: true) | | allowProxy | boolean | ❌ | Adds allowProxy="{Boolean}true" to .content.xml (default: true) | | dependencies | string[] | ❌ | Array of AEM clientlibs this clientlib depends on | | embed | string[] | ❌ | Array of AEM clientlibs this one embeds/inlines |

🗂 Output structure

After running vite build, the plugin generates:

clientlibs/my-clientlib/
├── js/
│   └── main.js
├── css/
│   └── app.css
├── resources/
│   ├── assets/
│   │   ├── Inter.woff2
│   │   └── logo.svg
│   └── maps/
│       ├── main.js.map
│       └── app.css.map
├── js.txt
├── css.txt
└── .content.xml

📦 .content.xml Example

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          categories="[my-clientlib]"
          dependencies="[core-clientlib]"
          embed="[shared-ui]"
          allowProxy="{Boolean}true"/>