A lightning-fast boilerplate for building Express Addons in Svelte, React, or Vue built on Vite + TypeScript + Sass
Huge thanks to our backers who have made this project possible!
Founding backers have made substantial contribution to the project at the start which has made this project possible.
...
If you're interested in supporting this open-source project, please contact the Hyper Brew team.
If you have questions with getting started using Bolt Express, feel free to ask and discuss in our free Discord community Discord Community.
If your team is interested in paid consulting or development with Bolt Express, please contact the Hyper Brew team. More info on our Custom Addon Development & Consulting Services
Yes! Bolt Express is 100% free and open source, being released under the MIT license with no attribution required. This means you are free to use it in your free or commercial projects.
We would greatly appreciate it if you could provide a link back to this tool's info page in your product's site or about page:
Bolt Express Info Page Link: https://hyperbrew.co/resources/bolt-express
Built with Bolt Express button graphics:
PNG Files
SVG Files
Create your new Bolt Express project (follow CLI prompts)
yarn create bolt-express
npx create-bolt-express@latest
pnpm create-bolt-express
Change directory to the new project
cd project
Install Dependencies (if not already done by create command)
yarn
npm i
pnpm i
Build the addon (must run before dev
, can also run after for panel to work statically without the process)
yarn build
npm run build
pnpm build
Setup Keys for development (Only Once Per Dev Machine)
The first time you debug an Express Addon on a machine you need to setup auth keys by following the CLI prompts. Once you've complted this once with Bolt Express or directly with
@adobe/create-ccweb-add-on
you don't need to do it again on that machine.
yarn cert
npm run cert
pnpm cert
Run the addon in hot reload mode for development
The first time you run
yarn dev
you will be promted to make a dev cert.
- On Windows, press OK on the popup dialog.
- On MacOS, enter your password in the CLI when prompted and press enter to create the cert.
You won't need to do this in the future.
yarn dev
npm run dev
pnpm dev
Bundle your addon and specified assets from copyZipAssets
to a zip archive in the ./zip
folder
yarn zip
npm run zip
pnpm zip
src/main.svelte
/ src/main.tsx
/ src/main.vue
src-code/code.ts
Bolt Express makes messaging between the frontend UI and backend code layers simple and type-safe.
Simply write your functions in code.ts
on the backend, and import the sandbox
variable to call the sandbox functions from the frontend with full type-safety:
const sandboxApi = {
myFunction: (a: string, b: number) => {
// do stuff
return true;
},
};
Frontend: src/main.svelte
/ src/main.tsx
/ src/main.vue
import { sandbox } from "./utils/utils";
const helloWorld = async () => {
let result = await sandbox.myFunction("hello", 400);
console.log(result);
};
Frontend code is built to the .tmp
directory temporarily and then copied to the dist
folder for final. This is done to run the build process outside of the @adobe/ccweb-add-on-scripts process to improve speed in development.
The backend code is bundled into a single code.js
file.
The manifest.json
is generated from the express.config.ts
file with type-safety. This is configured when running yarn create bolt-express
, but you can make additional modifications to the express.config.ts
file after initialization.