Webpack Bundler for Adobe CEP

0.2.0 verified Thu Apr 23 auth: no javascript

cep-bundler-webpack is a specialized Webpack bundler designed for creating Adobe Common Extensibility Platform (CEP) extensions, specifically supporting ExtendScript and modern web technologies like TypeScript. Currently at version 0.2.0, it provides a `createConfig` function to generate a Webpack configuration tailored for CEP's unique requirements, abstracting away much of the boilerplate. It is part of the `adobe-extension-tools` ecosystem, indicating its close association with Adobe extension development efforts. While at an early version, it aims to streamline the development workflow for Adobe Creative Cloud extensions by handling complex build processes, enabling features like TypeScript compilation. Its primary differentiator is its deep integration with the Adobe CEP environment, providing an opinionated but flexible build setup for a niche, yet powerful, extension platform.

Common errors

error TypeError: createConfig is not a function OR SyntaxError: Cannot use import statement outside a module ↓

cause Attempting to use ES Module `import` syntax in `webpack.config.js` instead of CommonJS `require`.

fix

Change import { createConfig } from 'cep-bundler-webpack'; to const { createConfig } = require('cep-bundler-webpack'); in your webpack.config.js. If your package.json specifies "type": "module", rename webpack.config.js to webpack.config.cjs.

error Error: Webpack can't find 'some-module' OR Module not found: Error: Can't resolve 'some-module' ↓

cause Missing `webpack` or `webpack-cli` or other essential dependencies, or incorrect resolution paths within the webpack configuration.

fix

Ensure webpack, webpack-cli, and any loaders/plugins referenced in createConfig or your custom config are installed (e.g., npm install --save-dev webpack webpack-cli ts-loader). Verify that entry and output paths are correct in your webpack.config.js.

error Error: Manifest.xml could not be generated OR Extension does not appear in Adobe host application ↓

cause Incorrect or missing CEP configuration (e.g., `cep` object in `createConfig` or `package.json`), preventing the bundler from correctly generating the `manifest.xml` or placing it in the expected structure.

fix

Check the cep object passed to createConfig for correct id, name, version, and hosts. Refer to cep-bundler-core documentation for expected CEP configuration schema. Ensure the build output matches the structure expected by Adobe applications for extensions.

Warnings

breaking As this package is in an early development phase (v0.2.0), minor version updates may introduce breaking changes to the `createConfig` API or the generated Webpack configuration structure. Developers should pin exact versions and review release notes carefully. ↓

fix Always pin to an exact package version (e.g., `"cep-bundler-webpack": "0.2.0"`) and consult the project's GitHub repository or source code for changes when upgrading.

gotcha Webpack configuration files (like `webpack.config.js`) must be written in CommonJS (`module.exports = { ... }`) syntax, even if your main project uses ES Modules (`"type": "module"` in `package.json`). Using `import` statements directly in `webpack.config.js` will cause build failures. ↓

fix Ensure your `webpack.config.js` uses `const { createConfig } = require('cep-bundler-webpack');` and `module.exports = createConfig(...);`. If your project's `package.json` specifies `"type": "module"`, name your webpack config file `webpack.config.cjs` to explicitly treat it as CommonJS.

gotcha This bundler is specifically tailored for Adobe CEP extensions. Attempting to use it for generic web projects or other plugin architectures will likely result in incorrect configurations or missing functionalities, as it expects specific CEP manifest and runtime considerations. ↓

fix Only use `cep-bundler-webpack` for its intended purpose: building Adobe CEP extensions. For other projects, use general-purpose Webpack configurations or bundlers.

gotcha Developing Adobe CEP extensions requires specific debugging setups (e.g., debug mode enabled in `manifest.xml`, Chrome DevTools for the browser context, and ESTK/VS Code for ExtendScript). This bundler facilitates the build, but developers must still understand the CEP debugging workflow. ↓

fix Familiarize yourself with Adobe's official documentation for CEP debugging, and ensure your CEP extension is configured for debug mode (often by creating a `.debug` file or specifying debug in the manifest).

Install

npm install cep-bundler-webpack

yarn add cep-bundler-webpack

pnpm add cep-bundler-webpack

Imports

createConfig
wrong
```
import { createConfig } from 'cep-bundler-webpack';
```
correct
```
const { createConfig } = require('cep-bundler-webpack');
```
Webpack configuration files must typically use CommonJS `require` syntax, even in projects configured for ESM.

Quickstart

This quickstart demonstrates how to set up a basic Adobe CEP extension using `cep-bundler-webpack` with a `webpack.config.js` file and a React/TypeScript entry point, including a minimal ExtendScript interaction. It also outlines the necessary `package.json` scripts and dependencies for development and production builds.

// webpack.config.js
const { createConfig } = require('cep-bundler-webpack');

module.exports = createConfig({
  // Entry point for your CEP extension's UI
  entry: './src/index.ts',
  // Output directory for the bundled files
  output: {
    filename: 'bundle.js',
    path: require('path').resolve(__dirname, 'dist/client'),
  },
  // Additional Webpack configuration specific to your project
  // For example, if you need custom loaders or plugins
  devServer: {
    port: 9000,
    hot: true,
    compress: true,
    static: { directory: require('path').join(__dirname, 'dist') },
  },
  // CEP-specific configuration, often managed via package.json or environment vars
  // This object allows direct override or extension of generated CEP manifest data
  cep: {
    id: 'com.yourcompany.yourextension',
    name: 'My CEP Extension',
    version: '1.0.0',
    hosts: ['PHXS', 'ILST', 'IDSN'], // Specify target Adobe applications
    // Other CEP-specific options like port, debug, etc.
  },
});

// package.json (excerpt)
/*
{
  "name": "my-cep-extension",
  "version": "1.0.0",
  "description": "A simple Adobe CEP extension",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js --mode production",
    "dev": "webpack --config webpack.config.js --mode development",
  },
  "keywords": ["Adobe", "CEP", "ExtendScript", "TypeScript", "Webpack"],
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "cep-bundler-webpack": "^0.2.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.0.0",
    "typescript": "^5.0.0",
    "ts-loader": "^9.0.0"
  }
}
*/

// src/index.ts
import React from 'react';
import ReactDOM from 'react-dom/client';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, Adobe CEP!</h1>
      <p>Bundled with cep-bundler-webpack</p>
    </div>
  );
};

const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  console.error('Root element not found');
}

// Basic ExtendScript communication (example)
declare global {
  interface Window {
    CSInterface: any; // Adobe CEP's CSInterface object
  }
}

if (window.CSInterface) {
  const csInterface = new window.CSInterface();
  csInterface.evalScript('alert("Hello from ExtendScript!");');
}