Hello Convex

This tutorial will teach you how to set up your first Convex app. Let's get building!

Prerequisites

• This guide assumes some familiarity with web development using React.
• Ensure you have Node.js 14.17 or higher installed on your system.

First, clone the convex-demos repository to get started with a simple Convex app built with React, TypeScript, and Vite.

: Clone the example app.
git clone https://github.com/get-convex/convex-demos.git
cd convex-demos/0-hello-convex

: Install Convex dependencies.
npm install

tip

Join our Discord community for help and feedback.

Now that dependencies have been installed you can create a new Convex project!

npx convex login
npx convex init

Next, let's run Convex in dev mode. This will sync the Convex functions in the convex/ directory to a dev Convex deployment, just for you. We'll explore the convex/ directory in more detail later, but for now you can just run:

: Run Convex in dev mode.
npx convex dev

Finally, run the frontend in a separate terminal tab to interact with it:

: Run the frontend code locally.
npm run dev

Navigate a browser to http://localhost:3000 and you'll see a simple counter. The frontend is running locally on your machine right now, but the data is stored in the cloud. Click away at the button, open it up in a few browser windows, and watch the value increment in all windows simultaneously!

Jump to the next page for a walk-through of what's going on beneath the surface.