Bolt Cep

Overview:

Bolt CEPA is a lightning-fast boilerplate for building Adobe CEP Extensions in React, Vue, or Svelte. It is built on Vite + TypeScript + Sass and offers features such as Lightning Fast Hot Module Replacement (HMR), Type-safe ExtendScript with Types-for-Adobe, easy configuration, optimized build size, and easy publishing to ZXP for distribution. This product is GitHub Actions ready-to-go for ZXP Releases.

Features:

• Lightning Fast Hot Module Replacement (HMR)
• Write Modern ES6 in both the JavaScript and ExtendScript layers
• 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

Installation:

Here is a guide to installing Bolt CEPA:

1. Quick Start:

   • Run the following command to create a new Bolt CEPA project using React template: yarn create bolt-cep myApp --template reactoryarn
   • Alternatively, you can use Vue or Svelte template by running: yarn create bolt-cep myApp --template vue or yarn create bolt-cep myApp --template svelte

2. Create Extension:

   • Navigate to the newly created project directory: cd myApp
   • Install all dependencies: yarn

3. Build and Run:

   • Run the initial build: yarn build
   • Create the cep folder structure and symlink to extensions folder
   • For development mode with HMR hot-reloading, run: yarn dev
   • For viewing in the browser, you can access the panel via localhost:3000/panel/(e.g. http://localhost:3000/main/, http://localhost:3000/settings/, etc.)
   • To serve files after running yarn build, run: yarn serve
   • For viewing in the browser, you can access the panel via localhost:5000/panel/(e.g. http://localhost:5000/main/, http://localhost:5000/settings/, etc.)

4. Build and Publish:

   • To build and bundle your project into a ZXP for publishing, run: yarn zxp
   • The project will be created in the dist/zxp folder
   • To bundle your ZXP and specified assets to a zip archive, run: yarn zip
   • The zip archive will be created in the dist/zip folder

5. Configuration:

   • Update your CEP build and package settings in cep.config.ts
   • Safely type your configuration in cep.config.ts file
   • Start building your app in src/js/main/index(.tsx or .vue or .svelte)
   • Write ExtendScript code in src/jsx/main.ts

6. Panel Structure:

   • Each panel is treated as its own page, with shared code for efficiency
   • The boilerplate comes with 2 panels, main and settings, which can be configured in cep.config.ts
   • To add more panels, add an item to the panels object in cep.config.ts and duplicate the folder structure as needed

7. ExtendScript:

   • ExtendScript can be written in ES6 and will be compiled down to a single ES3 file for compatibility
   • JSON 2 is included by default, and any external JS libraries added with the include directive will be bundled
   • App-specific code is split into modules for type-safe development by the application’s name
   • Add support for additional host apps by adding additional app module files, extending the main switch() in scr/jsx/index.ts, and updating cep.config.ts file

8. Calling ExtendScript from JS:

   • ExtendScript functions can be called with the evalES() function to avoid namespace clashes
   • If you want to call a global function directly, pass true as the second parameter to skip scoping

Summary:

Bolt CEPA is a powerful and efficient boilerplate for building Adobe CEP Extensions using React, Vue, or Svelte. It offers lightning-fast hot module replacement, type-safe ExtendScript, easy configuration, optimized build size, and easy publishing to ZXP for distribution. With its GitHub Actions integration, it simplifies the process of releasing ZXP packages. Its comprehensive installation guide and well-structured panel and ExtendScript organization make it an excellent choice for developers looking to build high-quality Adobe CEP Extensions.