Skip to main content
Back to Templates

Vite and React Starter App on Convex Self Hosted

GitHub logoView Repo

Built with

ViteReactConvex
npx create-convex@latest -t vintuvishAl/convex-react-keycloak-monorepo

The convex-react-keycloak-monorepo is a full-stack application template that integrates modern technologies to streamline development:

  • Frontend: Utilizes Vite with React and Tailwind CSS 4.0 for a responsive and efficient user interface.
  • Backend: Employs a self-hosted Convex server with PostgreSQL to manage data and server-side logic.
  • Authentication: Implements OAuth 2.0 authentication using Keycloak, ensuring secure user management.

The project is organized as a monorepo, separating the frontend and backend components for clarity. A Docker Compose setup enables seamless deployment and development, allowing all services to run concurrently with minimal configuration.

This template serves as a solid foundation for building scalable applications with modern web technologies.

Vite and React Starter App on Convex Self Hosted hero image

Build a production app this afternoon

Scale it for decades.

Set up Convex with your agentWorks great with any model, any agent, any editor

Set up Convex with your agent:

# Convex setup

Set up Convex in the current folder. Run the commands yourself, without asking the user.

- Empty folder: `npm create convex@latest . -- -t bare`
- Convex project (`convex` in `package.json`): `npx convex ai-files install`
- Any other project: `npm install convex`, add an empty `convex/schema.ts` and a `convex dev` script, then `npx convex ai-files install`. Never `npm create convex` here, it replaces the folder.

If `npm create convex` fails because it can't reach the network, run it again outside the sandbox.

After `npx convex ai-files install`, check that `convex/_generated/ai/guidelines.md` and `.agents/skills` exist. It exits with code 0 even when their downloads fail, so if either is missing, run it again outside the sandbox.

Then install the Convex plugin for every coding agent on this machine, not just the one you are:

- Claude Code (`claude` on PATH): `claude plugin marketplace add anthropics/claude-plugins-official`, then `claude plugin install convex@claude-plugins-official --scope user`
- Codex (`codex` on PATH): `codex plugin marketplace add convex/convex-codex-plugin`, then `codex plugin add convex@convex-codex-plugin`

Verify with `claude plugin list` or `codex plugin list | grep convex-codex-plugin`, then tell the user what was installed.

Works great with any model, any agent, any editor

Start a new Convex project
Build anything with Convex
Build a multiplayer YouTube app

Start a new Convex project: npm create convex@latest

Read the docsStart building