aem-sync-webpack-plugin

0.1.3 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that integrates with AEMSync to automatically upload files to Adobe Experience Manager (AEM) after manual changes or webpack build completion. Version 0.1.3 is the latest stable release, with no active development since 2016. It is a thin wrapper around the aemsync library and requires AEMSync to be installed separately. The plugin only triggers in webpack watch mode, making it ideal for local development workflows. Compared to other AEM upload plugins, it leverages the efficient aemsync delta-based sync mechanism.

Common errors

error Cannot find module 'aemsync' ↓

cause aemsync is not installed or not in node_modules.

fix

Install aemsync: npm install aemsync --save-dev

error TypeError: targets is not iterable ↓

cause targets option is not an array.

fix

Ensure targets is an array, e.g., targets: ['http://admin:admin@localhost:4502']

error AemSyncPlugin is not a constructor ↓

cause Missing 'new' keyword when instantiating the plugin.

fix

Use 'new AemSyncPlugin({...})' instead of 'AemSyncPlugin({...})'

Warnings

gotcha Plugin only works in webpack watch mode; does nothing during a regular build (webpack without --watch). ↓

fix Ensure webpack is run with the --watch flag, e.g., webpack --watch.

gotcha Target URLs must include credentials (e.g., admin:admin) otherwise authentication fails silently. ↓

fix Include credentials in the target URL: http://username:password@host:port.

gotcha The exclude glob pattern is applied relative to watchDir; incorrect patterns may cause node_modules to be uploaded. ↓

fix Set exclude to a glob pattern like '**/node_modules/**' to exclude node_modules from sync.

breaking The aemsync library must be installed separately; it is not a dependency of this plugin. ↓

fix Run npm install aemsync --save-dev to ensure aemsync is available.

Install

npm install aem-sync-webpack-plugin

yarn add aem-sync-webpack-plugin

pnpm add aem-sync-webpack-plugin

Imports

AemSyncPlugin

wrong

import AemSyncPlugin from 'aem-sync-webpack-plugin';

correct

const AemSyncPlugin = require('aem-sync-webpack-plugin');

Plugin is CJS-only; ESM import is not supported.

AemSyncPlugin
wrong
```
plugins: [AemSyncPlugin({...})]
```
correct
```
plugins: [new AemSyncPlugin({...})]
```
Must use the 'new' keyword to instantiate the plugin.

options.targets

wrong

targets: 'http://admin:admin@localhost:4502'

correct

targets: ['http://admin:admin@localhost:4502']

Targets must be an array of strings, even if only one target.

Quickstart

Configures the AemSyncPlugin in webpack.config.js to upload files to AEM on changes when running webpack --watch.

// webpack.config.js
const AemSyncPlugin = require('aem-sync-webpack-plugin');

module.exports = {
  // ...webpack config
  plugins: [
    new AemSyncPlugin({
      targets: [
        'http://admin:admin@localhost:4502'
      ],
      watchDir: './dist',
      exclude: '**/node_modules/**',
      pushInterval: 1000
    })
  ]
};

// Run: webpack --watch