An awesome cep extension boilerplate with excellent development experience
cep-react-webpack-boilerplate
An awesome cep extension boilerplate with excellent development experience.
Features
- modern frontEnd build tools: react + typescript + webpack
- complete typescript types for CSInterface/JSX/DescriptorInfo
- optimized eslint config helps you to avoid low level errors
- cross JSX/Browser message framework supports response callback
- cross JSX/Browser logging framework
- builtin command system
- builtin some useful shortcuts, eg: refresh by
cmd+r - builtin lots of useful utils, eg: promisifyFs.ts, psDomEvent.ts, layer.jsx, font.jsx
- JSX polyfill
- optimized VSCode settings, eg: .debug and manifest.xml syntax highlight
- distinct development/test/production mode both JSX and Browser for realistic commercial software develop
Dev
Make sure you had enabled the CEP debug mode.
Clone boilerplate to CEP home level installation directory
# cd extensions directory
# MacOS
cd ~/Library/Application Support/Adobe/CEP/extensions
# Windows
cd ~/AppData/Roaming/Adobe/CEP/extensions
# clone the boilerplate
git clone git@github.com:tjx666/cep-react-webpack-boilerplate.git
Install dependencies
pnpm install
Start dev server
Using VSCode shortcut cmd + shift + b or run following command:
pnpm start
Then you can restart photoshop and open the extension.
Build
# test version
pnpm run bundle:test
# production version, will bundle jsx -> jsxbin and minify the web code
pnpm run bundle