Back to Electric

Quickstart

website/docs/quickstart.md

latest4.2 KB
Original Source
<p class="intro-zap-container"> </p>

Quickstart

Let's make a super-fast, reactive web app using <span class="no-wrap-xs">Electric with TanStack DB</span>.

<div style="max-width: 632px">

[!Warning] ✨ Just want to see it in action? See the app running here or fork it on StackBlitz.

</div>

Setup

You'll need Node, pnpm and Caddy installed. If you haven't used Caddy before, you'll need to install it's root certificate using:

sh
caddy trust # may require sudo

<small><em>Why Caddy? Electric uses HTTP/2. Caddy enables HTTP/2 in local development.</em></small>

Get started

Run the starter script:

shell
npx @electric-sql/start my-electric-app

Start the dev server:

shell
pnpm dev

Open https://localhost:5173.

See the real-time sync

In another terminal, connect to Postgres using psql:

shell
pnpm psql

Update the project name:

sql
UPDATE projects SET name = 'Baz bam!';

The app updates instantly in real-time — across all users and devices.

Develop your app

The starter is a fully-fledged TanStack Start app with routing and auth.

You can edit the code manually. Or it has an AGENTS.md file you can load directly into your AI code editor:

sh
claude "Read Agents.md. Sort the project page todo list alphabetically."

See the starter template README for more details.

Deploy your app

Claim the Electric Cloud resources:

shell
pnpm claim

Deploy the app, for example to Netlify:

sh
pnpm deploy

Congratulations! You've shipped a super-fast, reactive web app based on real-time sync!

Next steps

<!-- - follow the [Tutorial](/docs/tutorial) to evolve your starter into a production-quality app. -->