August 14, 2023

An awesome cep extension boilerplate with excellent development experience

cep-react-webpack-boilerplate

An awesome cep extension boilerplate with excellent development experience.

preview

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