#Vite React Monorepo

4 messages · Page 1 of 1 (latest)

glass kernel
#

How do i turn an existing convex project into a monorepo for all projects using this backend (all vite react apps)?

dry beaconBOT
#

Hi @glass kernel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To turn an existing Convex project into a monorepo for multiple Vite React apps (all using the same Convex backend), you can follow these best practices based on the knowledge sources:

  1. Monorepo Structure
    Use a monorepo structure where your Convex backend and all your Vite React frontend apps live in the same repository. For example:

    /my-monorepo
  /convex         # Convex backend (functions, schema, etc.)
  /web-app-1      # First Vite React app
  /web-app-2      # Second Vite React app
  /web-app-n      # More Vite React apps
  package.json
  ...

  2. Convex Backend Sharing
    All frontend apps can import the generated Convex API types and use the same backend. The Convex backend code (in /convex) is the single source of truth for your API and schema.

  3. Frontend Setup
    In each Vite React app, install the convex package and set up the Convex client to point to your backend deployment URL. You can use environment variables (e.g., VITE_CONVEX_URL) to configure this per app.

  4. Type Safety Across Apps
    Each frontend app should import the generated API types from the shared /convex/_generated/api (or from a shared package if you extract it). This ensures all apps are type-safe and in sync with the backend.

  5. Reference Template
    Convex provides an official monorepo template that you can use as a reference. It works with the latest Convex features and demonstrates how to structure your monorepo for both web and mobile clients. You can start with this template or adapt your existing project to match its structure. The template is maintained and should work as-is, even if some dependencies are not the absolute latest versions. Updates can be deferred until needed, as per official guidance from Convex staff.

#
  1. Best Practices
    • Keep your Convex backend code modular and organized.
    • Use the monorepo to share code, types, and utilities between apps.
    • If you ever need to split into multiple repos, Convex supports exporting API types for use in separate repositories, but monorepo is the recommended and most straightforward approach for your use case.

References:

If you want to see a working example, check out the official monorepo template.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: