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.
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
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.
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)
this bootstrap is composed of three parts
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.
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.
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)
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.
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
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)
- 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:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent