{"id":29431910,"url":"https://github.com/powersync-community/vite-react-ts-powersync-supabase","last_synced_at":"2026-04-11T14:06:41.855Z","repository":{"id":303540062,"uuid":"1015810753","full_name":"powersync-community/vite-react-ts-powersync-supabase","owner":"powersync-community","description":"Get started quickly with PowerSync using Vite, React, TypeScript and Supabase.","archived":false,"fork":false,"pushed_at":"2026-03-03T04:44:30.000Z","size":4263,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-03T08:39:00.001Z","etag":null,"topics":["localfirstweb","postgresql","powersync","react","supabase","typescript","vite"],"latest_commit_sha":null,"homepage":"https://powersync.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/powersync-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-08T04:37:37.000Z","updated_at":"2026-01-30T11:05:49.000Z","dependencies_parsed_at":"2025-08-19T12:22:30.211Z","dependency_job_id":"56b5d9ad-d9e6-4273-ab08-0503f096277a","html_url":"https://github.com/powersync-community/vite-react-ts-powersync-supabase","commit_stats":null,"previous_names":["powersync-product-success/vite-react-ts-powersync-supabase","powersync-community/vite-react-ts-powersync-supabase"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/powersync-community/vite-react-ts-powersync-supabase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/powersync-community%2Fvite-react-ts-powersync-supabase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/powersync-community%2Fvite-react-ts-powersync-supabase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/powersync-community%2Fvite-react-ts-powersync-supabase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/powersync-community%2Fvite-react-ts-powersync-supabase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/powersync-community","download_url":"https://codeload.github.com/powersync-community/vite-react-ts-powersync-supabase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/powersync-community%2Fvite-react-ts-powersync-supabase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31581864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["localfirstweb","postgresql","powersync","react","supabase","typescript","vite"],"created_at":"2025-07-12T21:01:22.074Z","updated_at":"2026-04-09T02:02:50.233Z","avatar_url":"https://github.com/powersync-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite + React + TS + PowerSync + Supabase\n\n![App Demo](https://github.com/powersync-community/vite-react-ts-powersync-supabase/releases/download/v1.0.0/demo.gif)\n\nA templated Vite, TS, React, PowerSync and Supabase project to get you started quickly with building offline-first applications with PowerSync and Supabase.\n\n🚀 [Live Demo](https://vite-react-ts-powersync-supabase-production.up.railway.app/) 🚀\n\n# Usage\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Local Development\n\n###  Prerequisites\nYou will need the following tools installed on your local machine:\n- [Docker](https://docs.docker.com/get-docker/)\n- [Supabase CLI](supabase.com/docs/guides/local-development/cli/getting-started)\n\nFollow the two steps below to run the entire PowerSync + Supabase stack locally using Docker without requiring any sign up.\n\n1. Copy the environment template file:\n   ```bash\n   cp .env.local.template .env.local\n   ```\n\n2. Run the start-up commands for the various services:\n   ```bash\n   npm run dev:supabase\n   npm run dev:powersync\n   npm run dev:ui\n   ```\n\nNavigate to the local Vite URL e.g. http://localhost:5173/ Voilà!\n\n## Cloud Development\n\nTo run the hosted versions of PowerSync + Supabase, follow the steps below.\n\n### Prerequisites\n\n| Tool/Service     | Version / Info             | Notes                                                  |\n|------------------|----------------------------|--------------------------------------------------------|\n| PowerSync        | Active account required    | [Sign up here](https://accounts.journeyapps.com/portal/powersync-signup)             |\n| Supabase         | Active project/account     | [Sign up here](https://supabase.com/dashboard/sign-up)                   |\n\n### Backend Setup\nThis section guides you through setting up the backend using Supabase and PowerSync. Follow the steps below to configure your backend environment.\n\n#### 1. Setup Supabase\nFollow these steps to set up your backend with Supabase and PowerSync (or you can follow the [guide](https://docs.powersync.com/integration-guides/supabase-+-powersync)).\n\n\n1. [Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).\n2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in [database.pgsql](database.pgsql) to create the database schema, database functions, and publication needed for PowerSync.\n3. Enable \"anonymous sign-ins\" for the project [here](https://supabase.com/dashboard/project/_/auth/providers) (demo specific)\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eAlternative: Setup using the Supabase CLI\u003c/strong\u003e\u003c/summary\u003e\n\nIf you prefer using the Supabase CLI to develop the database locally and push it to a Supabase cloud later, you can set up your project as follows:\n1. Login to your Supabase Account `npx supabase login`\n2. Initialize your project `npx supabase init`\n3. Enable \"anonymous sign-ins\" for the project [here](https://supabase.com/dashboard/project/_/auth/providers)\n4. Copy your project ID from the Supabase dashboard [here](https://supabase.com/dashboard/project/_/settings/general)\n5. Link your local project `npx supabase link --project-ref \u003cproject-id\u003e`\n6. Create your first migration with `npx supabase migration new create_powersync_tables` and then copy the contents of [database.pgsql](database.pgsql) into the newly created migration file in the `supabase/migrations` directory.\n7. Push your tables to the cloud db\n   ```shell\n   npx supabase db push\n   ```\n\n\u003c/details\u003e\n\n#### 2. Setup PowerSync Instance and Connect to Supabase\n\n1. In the [PowerSync dashboard](https://powersync.journeyapps.com/), create a new PowerSync instance:\n   - Right-click on 'PowerSync Project' in the project tree on the left and click \"Create new instance\"\n   - Pick a name for the instance e.g. \"PowerSyncDemoInstance\" and proceed.\n\n2. In the \"Edit Instance\" dialog that follows, click on the \"Connections\" tab:\n   - Click on the \"+\" button to create a new database connection.\n   - Input the credentials from the project you created in Supabase. Go to [this page](https://supabase.com/dashboard/project/_?showConnect=true), copy \u0026 paste the connection string into the PowerSync dashboard \"URI\" field, and then enter your database password at the \"Password\" field. However, we do recommend using a dedicated database user for PowerSync, please refer to the [Source database guide](https://docs.powersync.com/installation/database-setup#2-create-a-powersync-database-user)\n   - Click the \"Test connection\" button and you should see \"Connection success!\"\n\n3. Click on the \"Credentials\" tab of the \"Edit Instance\" dialog:\n   - Tick the \"Use Supabase Auth\" checkbox and configure the JWT secret.\n   - Click \"Save\" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eAlternative: Setup using the PowerSync CLI\u003c/strong\u003e\u003c/summary\u003e\n\nSee [PowerSync CLI docs](https://docs.powersync.com/usage/tools/cli).\n\n\u003e This PowerSync CLI only works with **PowerSync Cloud instances.**\n\u003e The CLI currently does not support **self-hosted PowerSync instances.**\n\nIf you don't have a PowerSync account yet, [sign up here](https://accounts.journeyapps.com/portal/powersync-signup).\n\n1. **Get your Personal Access Token:**\n   - Go to the [PowerSync dashboard](https://powersync.journeyapps.com/)\n   - Press `Ctrl + Shift + P` (or `Cmd + Shift + P` on Mac)\n   - Search for \"Create Personal Access Token\"\n   - Give it \"owner\" policy and a descriptive label\n   - Copy the generated token\n2. **Initialize the CLI and authenticate:**\n   ```bash\n   npx powersync init\n   ```\nPaste your Personal Access Token when prompted.\n3. **Create a new PowerSync instance:**\n   ```bash\n   npx powersync instance create\n   ```\nFollow the prompts to configure:\n- Instance name (e.g., \"supabase-staging\")\n- Region (e.g., \"EU\")\n- Database connection details from your Supabase project (use the **direct connection**, not pooling)\n- When asked about Supabase auth, answer:\n   - `? Are you using Supabase auth? Yes`\n   - `? Do you want to add audiences? No`\n4. **Deploy sync rules:**\n   ```bash\n   npx powersync instance sync-rules deploy -f sync-rules.yaml\n   ```\n\n\u003e After deploying sync rules via CLI, the changes might not be reflected in the dashboard. If you want to see them in the dashboard, simply copy the contents of your `sync-rules.yaml` file and paste them into the dashboard's sync-rules editor, then redeploy.\n\n\u003c/details\u003e\n\n#### 3. Deploy Sync Rules (not needed if using PowerSync CLI)\n\n1. Open the [sync-rules.yaml](sync-rules.yaml) in this repo and copy the contents.\n2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the 'sync-rules.yaml' editor panel.\n3. Click the \"Deploy sync rules\" button and select your PowerSync instance from the drop-down list.\n\n#### 4. Set environment variables\n\nFirst, copy the environment template file:\n```bash\ncp .env.cloud.template .env.local\n```\n\nThen set the following environment variables in your `.env.local` file:\n\n```bash\nVITE_SUPABASE_URL=\nVITE_SUPABASE_ANON_KEY=\nVITE_POWERSYNC_URL=\n```\n\n**Where do you get these values?**\n\nFor Supabase, you can get both settings directly from:\n- VITE_SUPABASE_URL - [API Settings \u0026 URL](https://supabase.com/dashboard/project/_/settings/api)\n- VITE_SUPABASE_ANON_KEY - [API Keys](https://supabase.com/dashboard/project/_/settings/api-keys)\n\nFor PowerSync, follow these steps:\n1. Go to your [PowerSync Dashboard](https://powersync.journeyapps.com/)\n2. Navigate to your PowerSync instance\n3. Copy the \"Instance URL\" for `VITE_POWERSYNC_URL`\n\n## Use this project with bolt.new\n\n**To run this repo using Bolt.new will only work with the [Cloud Development](#cloud-development) option.**\n\n- Open this [link](https://bolt.new/github.com/powersync-community/vite-react-ts-powersync-supabase/tree/main) to load the project.\n   - You will see a configuration error in the preview window because the `.env.local` file has not yet been defined.\n- Create a new `.env.local` file and populate it with the appropriate Supabase and PowerSync credentials, as specified in the `.env.local.template` file included in this repository (refer to step 4 \"Set up environment\").\n- Save the file — the app should launch automatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowersync-community%2Fvite-react-ts-powersync-supabase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpowersync-community%2Fvite-react-ts-powersync-supabase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowersync-community%2Fvite-react-ts-powersync-supabase/lists"}