Framework guide

Feature-request board for Vite + React

Vite apps usually separate a React SPA from a backend API. Feedback fits that shape: the widget runs in the browser; your API owns BYO posts (or Hosted stores them). Feedback does not authenticate end users, assert user.id from your session.

Install

pnpm add @bootstrapware/feedback

// main.tsx or IdeasPage.tsx
import "@bootstrapware/feedback/styles.css";

Local / demo in the SPA

import { Feedback, createLocalAdapter } from "@bootstrapware/feedback";
import "@bootstrapware/feedback/styles.css";

export function IdeasBoard({ user }: { user: { id: string; name?: string } }) {
  return (
    <Feedback
      user={user}
      adapter={createLocalAdapter({ storageKey: "vite-feedback" })}
    />
  );
}

Use your normal SPA auth: cookie credentials, bearer token, or whatever your API already expects. The board does not manage login for you.

Hosted keys with Vite env

Prefix browser-exposed vars with VITE_. Only publishable keys belong there.

#.env.local
VITE_API_URL=http://localhost:3001
VITE_FEEDBACK_BOARD_ID=brd_...
VITE_BSW_PUBLISHABLE_KEY=bsw_test_pub_...

<Feedback
  boardId={import.meta.env.VITE_FEEDBACK_BOARD_ID}
  publishableKey={import.meta.env.VITE_BSW_PUBLISHABLE_KEY}
  user={currentUser}
/>

Register your SPA origin for CORS when the browser calls Feedback Hosted APIs. See origins. Your own API still needs CORS (or a same-origin proxy) for BYO adapter fetches.

BYO against your API

Pass a FeedbackAdapter that fetches your API (for example VITE_API_URL + "/feedback") with the session token. Enforce title ≤ 200, body ≤ 5000, and statuses including shipped (not completed) on the server.

Mode resolution

adapter prop → Hosted (boardId + publishableKey) → local

Pitfalls

• Forgetting styles.css
• Using a non-VITE_ prefix and wondering why env is undefined in the browser
• Exposing secret keys as VITE_ vars
• CORS blocking either your API or the Hosted config / posts fetch
• Skipping host-asserted user.id

Related: React guide · API keys · Modes · Origins · Live demo