Create Adobe-CEP extension
Adobe-CEP with React, Material-UI, Native Node modules, Webpack, Babel and ExtendScript
this Adobe-CEP extension creator bootstraps for creating Adobe CC extensions easily with modern web technologies and with native node.js modules for session logic and with support for extendscript (host app). It is built in a semi opinionated way so you can focus on writing your great extensions.
how to build
first run npm install, then choose
npm run build:dev/npm run build:prod- will build into./distfoldernpm run deploy:dev/npm run deploy:prod- will deploy./distfolder into the extension folder. if in dev mode, it will create a symbolic link, otherwise it will copy the entire folder.npm run archivewill create a self signed certificate and sign a ZXP package ready to publishnpm run release:dev/npm run release:prod- will build, deploy and archive (in production)
the output is a ./dist extension folder
dist
com.package.name/
index.html
.debug
CSXS/
manifest.xml
icons/
favicon.ico
node_modules/
host/
index.js
client-dist/
bundle.js
main.css
session-dist/
bundle.js
host/
libs/
CSInterface.js
how to customize
start with ./pluginrc.js, this is the plugin config I created, here is an example
module.exports = {
extensionBundleId: 'com.hendrix.demo',
extensionBundleName: 'demo',
extensionBundleVersion: '1.0.1',
cepVersion: '7.0',
panelName: 'hendrix demo',
width: '400',
height: '600',
root: root,
sourceFolder: srcFolder,
destinationFolder: destFolder,
certificate : {
customCert: {
path: '',
password: 'password'
},
selfSign: {
country: 'US',
province: 'CA',
org: 'org',
name: 'name',
password: 'password',
locality: 'locality',
orgUnit: 'orgUnit',
email: '[email protected]',
output: certPath
}
}
}when build is happening, then the build will pickup your package id and panel name
and other configurations from this file and will use it against a template that will
generate the ./dist/CSXS/manifest.xml and .debug (in dev mode) file for you.
also, I added support for a custom certificate and for a self-signed certificate.
feel free to modify the contents of the assets folder for you own need.
how to debug
debugging is achieved through the chrome debugger
- release a dev build with
npm run release:dev - inside Adobe, open the extension, you may have to restart if this is the first time.
- open a browser at the following location http://localhost:`PORT`/ (See port number in .debug file)
what does this include ?
this bootstrap is composed of three parts
Front end side
inside src/client-src you have the entry point for creating ReactJS application.
installing modules is against the project root, see /project.json.
a nice feature, that it has is that you can use webpack-dev-server to see
your UI results with watching at the browser, simply use:
npm startornpm run client:dev-serverthis will generate the template html for you and run it in your browser, and will rebuild on code changes which is nice to have.
back end side / session (using node modules)
inside src/session-src you have the entry point for using native node.js modules.
Adobe-CEP supports instantiating Node.js runtime as well as Chromium but I believe
most developers would like to use the power of Node.js for doing IO.
Adobe-CEP does provide it's native IO for disk access and also using Chromium
you can use the browser Fetch api, but it can lead to very bad code structuring.
I inject the session object in the window object and therefore it is accessible
even from the front end side.
Also notice, that this folder has it's own node-modules separate from the root folder,
this is because, they are built differently from the Front end side.
using node modules can enhance the functionality.
ExtendScript side
inside src/host, you will put you jsx files, by default I will load index.jsx,
but I highly advise to use the session to load a jsx file dynamically so it can pick
up it's #include dependencies otherwise it won't (this is a known issue)
Webpack side
so why am I using Webpack ?
without webpack, you will have to require modules by absolute path, which is not nice,
also I wanted to enjoy a better ES6 syntax.
why are there separate Webpack configs for client and session?
very good question. It boils down to the following fact, the client/front-end side, uses
pure web technologies and can be bundeled with all of it's dependencies and it has a classic
web target for webpack.
the session side uses native node.js modules and has a node target in it's config, they
are not to be mixed together or else subtle configuration will not work. this is equivalent
to other projects using electron, also, it is not advisable to bundle native node.js modules,
this is not efficient.
Build scripts
inside /build-scripts, you will find the webpack configs and also the build and deploy
scripts. They use no-fancy node modules to keep things simple (no libs like Gulp).
you can find:
/build-script/build.js development/productionthis will build the entire thing/build-script/deploy.js development/productionthis will deploy the entire thing into the adobe extensions folder in debug mode currently, I still need to sign the extension/build-script/archive.jsthis will archive the distribution in ZXP format, ready to be published
FAQ
Q: how do I add more web development modules (like redux) ?
A: simply npm install redux from the root ./ directory
Q: how do I add more session native node modules (like fs-extra) ?
A: simply npm install fs-extra from the ./src/session-src directory, when building occurs, these
modules will be copied to the ./dist folder.
Q: how do I add some js lib without npm ?
A: simply edit ./src/index.html
Q: how do I add some extendscript files ?
A: you must add them to ./src/host/ folder and then you have two choices. one, is to edit
./assets/CSXS/manifest.xml file to declare them, or load them at runtime dynamically (better, you can read
about it more later)
How to install
- for dev mode with chrome debugging, simply
npm run release:dev - for prod mode with zxp signed package, simply
npm run release:prod, to install the zxp package, i advise the following resource: