Astro Starter

An Astro starter project using Convex with React and Tailwind CSS v4

To enable Convex in your Astro project:

1. Install convex and run npx convex dev to start syncing changes to your Convex backend. This will create a convex folder in your project if you don't have one already.
2. Wrap components that access Convex in a ConvexProvider component. In this template, this is done with withConvexProvider in src/lib/convex.tsx.
3. Add these components to your .astro pages as usual.
4. Use useQuery and other Convex hooks in the components as usual.

The withConvexProvider function is a convenience wrapper that wraps a React component in a ConvexProvider component. This is necessary because Astro context providers don't work when used in .astro files.

Usage:

// CommentForm.tsx
export default withConvexProvider(function CommentForm() {
    ... normal component code ...
});

Implementation:

// Initialized once so all components share the same client.
const client = new ConvexReactClient(CONVEX_URL);

export function withConvexProvider<Props extends JSX.IntrinsicAttributes>(
  Component: FunctionComponent<Props>,
) {
  return function WithConvexProvider(props: Props) {
    return (
      <ConvexProvider client={client}>
        <Component {...props} />
      </ConvexProvider>
    );
  };
}