Bolt CEP | Build Extensions Faster
The Chromium frontend layer of Adobe CEP Extension Panels is a major benefit in development. This allows developers to pick from a massive library of frameworks used in standard web development, such as React, Vue, or Svelte to improve their development speed, accuracy, and organization.
The trouble comes in setting up these frameworks to work properly in the Adobe CEP Panel environment. Getting this to work well is not always an easy task, and comes with lots of caveats.
We've decided to open source the boilerplate we've put together at Hyper Brew with our favorite stack for developing Adobe CEP Extensions: Bolt CEP.
BOLT CEP OVERVIEW
- Lightning Fast Hot Module Replacement (HMR)
- Type-safe ExtendScript with Types-for-Adobe
- Easily configure in cep.config.ts
- Setup for single or multi-panel extensions
- Comes with multi-host-app configuration
- Optimized Build Size
- Easy Publish to ZXP for Distribution
- GitHub Actions ready-to-go for ZXP Releases
Let's dive a bit deeper into why we chose this Stack for CEP extensions.
Having a properly configured bundler allows you to write with these modern features, and compile down to ES3 compatible code, so you can write the modern way and still run your code in Adobe apps.
Following in the path of excellent bundlers such as Webpack, Parcel, and Rollup, Vite takes a different approach, handling all dev bundling in esbuild, which is written in Go for maximum speed, and allows for lighting fast bundling boasting 10-100x faster than previous JS bundlers.
Vite's Hot Module Replacement (HMR) allows you to instantly see your changes in live during development, and optimizes bundle-size so you only ship the code you need.
We've built our own plugin for Vite to handle requirements specific for CEP panels and ExtendScript, as well as packaging your extension as a ZXP for final delivery.
Modern UI frameworks make development a much smoother and predictable process. While each framework has its strength and weaknesses, our favorite is React as it remains the most popular and widely used frontend framework by downloads.
React has been our top choice for building reliable and responsive user interfaces for our CEP Extensions. There is a massive community using React so you can find plenty of answers to common questions online as well as a multitude of ready-to-use libraries for practically any scenario. Common libraries with ready-to-go UI widgets can easily be added like Material UI, Chakra UI, or Adobe's Spectrum to quickly build your UI layout for your tool.
The final item on the stack is Sass, as they call it: CSS with superpowers. Sass brings so many useful features to CSS styling including variables, functions, inheritance, and improved selectors. Sass can do everything standard CSS can and more, which makes it easy to transition as you can start by writing standard CSS, and then reach for Sass features as needed.
Sass makes standardizing color palettes, media queries, shared component styling easy and reliable across large projects. Vite compiles Sass down to CSS in order to run in the browser.
To try out Bolt CEP for yourself, head over to our GitHub and clone the repo and follow the QuickStart and Config steps to get up and running.
If you're new to Adobe Extensions, check out our post on Building Adobe Extensions and the differences between Scripts vs Extensions vs Plugins.
Have questions on getting started? Reach out to the Hyper Brew team and we'd be happy to help!