Convex

6 months ago

A New Command to Start Building Faster: npm create convex

Start building faster with npm create convex

There’s a new way quickest way to start building a new app on Convex!

You can now use the magical command npm create convex@latest to spin up a new Convex app from a preexisting template. This will install and run the latest version of the create-convex tool, which will present you with choices about the frontend client & authentication providers you’d like to use in this app.

Create an app with preconfigured integrations

It’s this simple to generate a new Convex app: run npm create convex@latest and follow the prompts! Here’s what it would look like to create an app using React, Vite, and Clerk:

% npm create convex@latest
Need to install the following packages:
create-convex@0.0.5
Ok to proceed? (y) y
✔ Project name: … my-app
✔ Choose a client: › React (Vite)
✔ Choose user authentication solution: › Clerk

Setting up...

added 454 packages in 9s

✔ Done. Now run:

  cd my-app
  npm run dev

Now, in the newly created my-app directory you have a complete and ready-to-customize TypeScript React app, with Vite and Clerk configured and a convex/ directory just waiting for you to fill it with fantastic functions!

Now make the app your own

To start fleshing out your backend, edit or replace convex/myFunctions.ts, which comes pre-populated with examples of query, mutation , and action functions to get you started.

And in this app, which uses React/Vite for the frontend, you can start editing src/App.tsx to build out your UI. To help you do that as quickly and effortlessly as possible, the bootstrapped app comes with ready-to-use shadcn/ui components, which you can customize in the components/ directory and style with TailwindCSS classes.

Choose from our existing templates

One of the great things about Convex is you’re not restricted to a certain frontend or auth provider, so you can choose your own adventure by answering the prompts. You can currently choose between Next.js and Vite for the client (or none, if you don’t need a frontend or want to provide your own), and between Clerk and Lucia for the authentication provider (or none).

When you run npm create convex, the CLI prompts let you walk through those choices one by one, and based on your selections the bootstrapper tool chooses one of several preexisting templates as the basis for your app.

See the create-convex README on Github for a list of the currently supported templates, and stay tuned as we plan to add even more in the future!

Specify a template with -t

If you already know which template you want to use for your app, you can skip the prompts and cut to the chase by specifying the app name and a template directly with the -t flag, using the syntax npm create convex <app-name-here> -- -t <template-name-here>, like so:

$ npm create convex my-next-app -- -t nextjs-lucia-shadcn

Setting up...

added 523 packages in 26s

✔ Done. Now run:

  cd my-next-app
  npm run dev

And if you’d rather use some other project as the basis for your app (perhaps one of our many sample apps?), you can specify the owner & name of any Github repo as the template to copy:

$ npm create convex@latest my-clerk-app -- -t thomasballinger/convex-clerk-users-table

For more details, head over to the get-convex/templates repo on Github, which contains the source of the create-convex bootstrapper package as well as all the default templates.

And as always, don’t forget to hop into the Convex Discord to share your amazing new apps with the community. Happy building!