菜单
Run one of the example apps' dev servers (the "🚀 Run Example App" launch config). Use when asked to start, run, preview, or manually test an example app (web-js, vue, next-latest, next-12, react-latest, react-17, designer), e.g. to see an inbox/toast/preferences change working in a browser.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | run-example-app |
| description | Run one of the example apps' dev servers (the "🚀 Run Example App" launch config). Use when asked to start, run, preview, or manually test an example app (web-js, vue, next-latest, next-12, react-latest, react-17, designer), e.g. to see an inbox/toast/preferences change working in a browser. |
The repo ships runnable example apps under examples/* (plus designer) that embed the Courier SDKs. This is the headless equivalent of the 🚀 Run Example App VSCode launch config.
| Workspace | Stack | Notes |
|---|---|---|
web-js | Vanilla JS + Vite, Web Components | Many sub-examples under examples/web-js/examples/*.html |
vue | Vue 3 + Vite, Web Components | Embeds <courier-inbox> as a custom element |
angular | Angular + Vite (Analog), Web Components | Embeds <courier-inbox> via CUSTOM_ELEMENTS_SCHEMA |
next-latest | Next.js (latest) + React SDK | |
next-12 | Next.js 12 + React SDK | |
react-latest | React (18+) + React SDK | |
react-17 | React 17 + React 17 SDK | |
designer | Internal theming/designer app |
From the repo root, pick the workspace and run its dev script:
yarn workspace <app> run dev
For example:
yarn workspace vue run dev # → http://localhost:5173
yarn workspace web-js run dev
The Vite-based apps (web-js, vue) alias the @trycourier/* packages to their src/ (see each app's vite.config.ts), so they pick up package source changes without a rebuild — but restart the dev server to see them (the SDK packages aren't HMR-integrated).
Most examples sign a user into the inbox using env vars. Create an .env in the app's directory:
VITE_USER_ID={YOUR_USER_ID}
VITE_JWT={YOUR_JWT}
(.env files are gitignored.) Without credentials the inbox renders its empty / signed-out state — which is itself useful for testing that UI (e.g. the vue example uses it to verify the empty-state styles don't leak into the host page). See each app's README.md for specifics, including EU endpoint setup.
If the app fails to resolve @trycourier/* modules, the packages likely need building — see the sync-packages skill (yarn build-packages, or yarn sync for a full reset).
These two launch configs are interactive (they prompt via gum and open GUIs), so run them in a real terminal rather than automating them:
yarn ipqr: prints a QR code to your LAN URL (default port 5173) for testing the dev server on a phone.sh ./scripts/screenshot_launch.sh: prompts for a URL and opens it in Chrome app mode for clean screenshots.Manage versioning for the @trycourier packages with changesets — create a changeset describing a version bump after changing package source, and bump package versions for release with `yarn changeset version`. Use when modifying @trycourier/*/src and a release-tracking changeset is needed, or when cutting a release locally / running the "Version Packages" step by hand.
Diagnose and drive the courier-web npm release pipeline — the Release workflow on main, the changesets "Version Packages" PR (changelogs + version bumps), and OIDC publishing to npm. Use when a Release run fails, packages didn't appear on npm after merging Version Packages, publishing hits ENEEDAUTH, or someone asks why the changelogs/release didn't kick off after a merge.
Change or add a themable style (border, color, shadow, radius, font) on a Courier UI web component — inbox, toast, preferences, or core. Use when adjusting a component's default look, adding a new theme property, or fixing a style that doesn't render in light or dark mode.
Keep the framework-SDK showcase example apps (react-latest, react-17, vue, and angular) at feature parity — the same set of demo pages and routes, one per SDK. Use whenever you add, change, or remove a demo in one showcase example (a new route/page, a themed variant, a custom-renderer demo, etc.) so the change is mirrored across the others, or when auditing that the showcases are in sync.
Checklist for adding a new example app under examples/* so it's runnable and discoverable. Use whenever you create a new example app (any new examples/<name> workspace) — it MUST be registered in .vscode/launch.json's "🚀 Run Example App" picker, and there are a few other wiring steps. Apply this any time you scaffold a new example.
Check or update the committed API reports for the @trycourier packages (API Extractor reports under api/*.api.md). Use when CI's "Build packages and check API changes" job fails on an API diff, when you intentionally changed a package's public API surface and need to refresh the committed report, or to verify locally that the reports are in sync before pushing.