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

``bash
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

`

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"/>
``