Tauri + Shadcn UI + PowerSync

This template should help get you started developing with Tauri, React, Typescript, Shadcn UI and PowerSync in Vite.

In addition, this template also configures ESLint, Prettier, Husky and Lint-staged for pre-commits.

Version without PowerSync.

Getting Started

Basics

Tauri

Ensure that you have the Tauri prerequisites installed.

Install dependencies

pnpm install

Start the development server

pnpm run tauri dev

PowerSync setup

This template is set up to work with PowerSync. PowerSync is a sync layer for building local-first apps with simple state management and real-time reactivity.

Ensure that the PowerSync prerequisites are met: Configure your source database and Connect PowerSync to your database.

Environment variables

Copy the .env.example file to .env and fill in the required environment variables.

cp .env.example .env

Set VITE_POWERSYNC_URL and VITE_POWERSYNC_TOKEN to your PowerSync server URL and development token respectively.

Define your PowerSync schema

Define your PowerSync schema in the src/components/providers/AppSchema.ts file. The default schema there is an arbitrary Project schema for projects table. You can replace it with your own.

For more information, see PowerSync documentation.