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 Slack community for help and feedback.

Now that dependencies have been installed you can provision a new Convex deployment!

npx convex login
npx convex init

Next, we need to register the Convex functions in the convex/ directory of the git repository with this new Convex deployment. We'll explore this directory in more detail later, but for now you can just run:

: Deploy your locally-authored Convex functions to your new deployment.
npx convex push

At this point the deployment for your project is fully configured, and all we need to do is run the frontend 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 durable counter backed by Convex. 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.