Skip to content

Commit acf64a2

Browse files
dean-journeyappsdean-journeyapps
committed
Merge branches 'main' and 'main' of github.com:powersync-community/vite-react-ts-powersync-supabase
2 parents 19a58e2 + a7249ac commit acf64a2

1 file changed

Lines changed: 142 additions & 49 deletions

File tree

‎README.md‎

Lines changed: 142 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,139 @@
11
# Vite + React + TS + PowerSync + Supabase
22

3-
A template Vite, TS, React, PowerSync and Supabase project to get you started quickly with building offline-first applications with PowerSync and Supabase.
3+
![App Demo](https://github.com/powersync-community/vite-react-ts-powersync-supabase/releases/download/v1.0.0/demo.gif)
44

5-
## Getting Started
5+
A templated Vite, TS, React, PowerSync and Supabase project to get you started quickly with building offline-first applications with PowerSync and Supabase.
66

7-
You have 4 options to get started with this template.
8-
We recommend using the first option for a quick start.
7+
## Requirements
98

10-
1. Generate a repository from this [template](https://github.com/powersync-community/vite-react-ts-powersync-supabase/generate)
11-
2. Use [degit](https://github.com/Rich-Harris/degit) to scaffold the project:
9+
| Tool/Service | Version / Info | Notes |
10+
|------------------|----------------------------|--------------------------------------------------------|
11+
| Node.js (via nvm)| `v20.19.0` | Ensure you run `nvm use` to match the project version |
12+
| PowerSync | Active account required | [Sign up here](https://accounts.journeyapps.com/portal/powersync-signup) |
13+
| Supabase | Active project/account | [Sign up here](https://supabase.com/dashboard/sign-up) |
1214

13-
```bash
14-
npx degit powersync-community/vite-react-ts-powersync-supabase
15-
```
15+
16+
# Getting Started
17+
18+
You have 4 options to get started with this template. We recommend using the first option for a quick start.
19+
20+
<details>
21+
<summary><strong>1. Generate from template (Recommended)</strong></summary>
22+
23+
Generate a repository from this [template](https://github.com/powersync-community/vite-react-ts-powersync-supabase/generate).
24+
25+
</details>
26+
27+
<details>
28+
<summary><strong>2. Use degit</strong></summary>
29+
30+
Use [degit](https://github.com/Rich-Harris/degit) to scaffold the project:
31+
32+
```bash
33+
npx degit powersync-community/vite-react-ts-powersync-supabase
34+
```
1635

1736
> **Note**: `degit` is a tool that downloads the latest version of a repository without the git history, giving you a clean starting point. Add a second argument to specify your project name (e.g., my-app).
1837
19-
3. Clone the repository directly and install dependencies:
38+
</details>
2039

21-
```bash
22-
git clone https://github.com/powersync-community/vite-react-ts-powersync-supabase.git
23-
```
40+
<details>
41+
<summary><strong>3. Clone the repository</strong></summary>
42+
43+
Clone the repository directly and install dependencies:
44+
45+
```bash
46+
git clone https://github.com/powersync-community/vite-react-ts-powersync-supabase.git
47+
```
48+
49+
</details>
50+
51+
<details>
52+
<summary><strong>4. Start with bolt.new</strong></summary>
2453

25-
4. Start the project using [bolt.new](https://bolt.new):
54+
Start the project using [bolt.new](https://bolt.new):
2655

2756
- Open this [link](https://bolt.new/github.com/powersync-community/vite-react-ts-powersync-supabase/tree/main) to load the project.
28-
- You will see a configuration error in the preview window because the `.env` file has not yet been defined.
29-
- Create a new `.env` file and populate it with the appropriate Supabase and PowerSync credentials, as specified in the `.env.local.template` file included in this repository.
57+
- You will see a configuration error in the preview window because the `.env.local` file has not yet been defined.
58+
- 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").
3059
- Save the file — the app should launch automatically.
3160

61+
</details>
62+
3263
## Usage
3364

3465
After cloning the repository, navigate to the project directory and install the dependencies:
3566

36-
```bash
37-
cd vite-react-ts-powersync-supabase
38-
npm install
39-
npm run dev
40-
```
67+
```bash
68+
cd vite-react-ts-powersync-supabase
69+
npm install
70+
npm run dev
71+
```
72+
73+
---
4174

42-
## Setup Backend
75+
# Backend Setup
76+
This section guides you through setting up the backend using Supabase and PowerSync. Follow the steps below to configure your backend environment.
4377

44-
### 1. Setup Supabase
78+
## 1. Setup Supabase
4579
Follow 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)).
4680

47-
#### Setup using the Supabase Dashboard
81+
<details>
82+
<summary><strong>Option 1: Setup using the Supabase Dashboard</strong></summary>
83+
4884
1. [Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).
49-
2. 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.
85+
2. 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.
5086
3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers) (demo specific)
5187

52-
#### Setup using the Supabase CLI (optional)
88+
</details>
89+
90+
<details>
91+
<summary><strong>Option 2: Setup using the Supabase CLI</strong></summary>
92+
5393
If you prefer using the Supabase CLI, you can set up your project as follows:
5494
1. Login to your Supabase Account `npx supabase login`
5595
2. Initialize your project `npx supabase init`
5696
3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers)
5797
4. Copy your project ID from the Supabase dashboard [here](https://supabase.com/dashboard/project/_/settings/general)
5898
5. Link your local project `npx supabase link --project-ref <project-id>`
59-
6. 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.
99+
6. 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.
60100
7. Push your tables to the cloud db
61101
```shell
62102
npx supabase db push
63103
```
64104

65-
### 2. Create PowerSync Instance and Connect to Supabase
105+
</details>
106+
107+
## 2. Setup PowerSync Instance and Connect to Supabase
66108

67109
You can set up your PowerSync instance using either the Dashboard or CLI approach:
68110

69-
#### Option 1: Using PowerSync [CLI](https://docs.powersync.com/usage/tools/cli)
111+
<details>
112+
<summary><strong>Option 1: Setup using the PowerSync Dashboard</strong></summary>
113+
114+
If you prefer using the web interface:
115+
116+
1. In the [PowerSync dashboard](https://powersync.journeyapps.com/), create a new PowerSync instance:
117+
- Right-click on 'PowerSync Project' in the project tree on the left and click "Create new instance"
118+
- Pick a name for the instance e.g. "PowerSyncDemoInstance" and proceed.
119+
120+
2. In the "Edit Instance" dialog that follows, click on the "Connections" tab:
121+
- Click on the "+" button to create a new database connection.
122+
- Input the credentials from the project you created in Supabase. In the Supabase dashboard, under your project you can go to "Project Settings" and then "Database" and choose "URI" under "Connection string", **untick the "Use connection pooling" option** to use the direct connection, and then copy & paste the connection string into the PowerSync dashboard "URI" field, and then enter your database password at the "Password" field.
123+
- Click the "Test connection" button and you should see "Connection success!"
124+
125+
3. Click on the "Credentials" tab of the "Edit Instance" dialog:
126+
- Tick the "Use Supabase Auth" checkbox and configure the JWT secret.
127+
- Click "Save" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.
128+
129+
</details>
130+
131+
<details>
132+
<summary><strong>Option 2: Setup using the PowerSync CLI</strong></summary>
70133

71-
> This PowerSync CLI only works with **PowerSync Cloud instances.**
134+
See [PowerSync CLI docs](https://docs.powersync.com/usage/tools/cli).
135+
136+
> This PowerSync CLI only works with **PowerSync Cloud instances.**
72137
> The CLI currently does not support **self-hosted PowerSync instances.**
73138
74139
If you don't have a PowerSync account yet, [sign up here](https://accounts.journeyapps.com/portal/powersync-signup).
@@ -105,29 +170,57 @@ Follow the prompts to configure:
105170

106171
> 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.
107172
108-
#### Option 2: Using PowerSync Dashboard
109-
110-
If you prefer using the web interface:
173+
</details>
111174

112-
1. In the [PowerSync dashboard](https://powersync.journeyapps.com/), create a new PowerSync instance:
113-
- Right-click on 'PowerSync Project' in the project tree on the left and click "Create new instance"
114-
- Pick a name for the instance e.g. "Yjs Demo Test" and proceed.
175+
## 3. Deploy Sync Rules
115176

116-
2. In the "Edit Instance" dialog that follows, click on the "Connections" tab:
117-
- Click on the "+" button to create a new database connection.
118-
- Input the credentials from the project you created in Supabase. In the Supabase dashboard, under your project you can go to "Project Settings" and then "Database" and choose "URI" under "Connection string", **untick the "Use connection pooling" option** to use the direct connection, and then copy & paste the connection string into the PowerSync dashboard "URI" field, and then enter your database password at the "Password" field.
119-
- Click the "Test connection" button and you should see "Connection success!"
177+
<details>
178+
<summary><strong>Option 1: Using CLI (if you used CLI setup above)</strong></summary>
120179

121-
3. Click on the "Credentials" tab of the "Edit Instance" dialog:
122-
- Tick the "Use Supabase Auth" checkbox and configure the JWT secret.
123-
- Click "Save" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.
180+
The sync rules are already deployed if you followed the CLI setup steps above.
124181

125-
### 3. Deploy Sync Rules
182+
</details>
126183

127-
#### Option 1: Using CLI (if you used CLI setup above)
128-
The sync rules are already deployed if you followed the CLI setup steps above.
184+
<details>
185+
<summary><strong>Option 2: Using Dashboard</strong></summary>
129186

130-
#### Option 2: Using Dashboard
131-
1. Open the [`sync-rules.yaml`](sync-rules.yaml) in this repo and copy the contents.
187+
1. Open the [sync-rules.yaml](sync-rules.yaml) in this repo and copy the contents.
132188
2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the 'sync-rules.yaml' editor panel.
133-
3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
189+
3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
190+
191+
</details>
192+
193+
## 4. Set up environment
194+
195+
First, copy the environment template file:
196+
```bash
197+
cp .env.local.template .env.local
198+
```
199+
200+
Then set the following environment variables in your `.env.local` file:
201+
202+
```bash
203+
VITE_SUPABASE_URL=
204+
VITE_SUPABASE_ANON_KEY=
205+
VITE_POWERSYNC_URL=
206+
```
207+
208+
### How to get these values:
209+
210+
**VITE_SUPABASE_URL & VITE_SUPABASE_ANON_KEY:**
211+
212+
**Quick Access:** For convenience, you can access both settings directly:
213+
- [API Settings & URL](https://supabase.com/dashboard/project/_/settings/api)
214+
- [API Keys](https://supabase.com/dashboard/project/_/settings/api-keys)
215+
216+
**Detailed Instructions:**
217+
1. Go to your [Supabase Dashboard](https://app.supabase.com)
218+
2. Select your project
219+
3. For the URL: Navigate to Project Settings → Data API and copy the "Project URL" for `VITE_SUPABASE_URL`
220+
4. For the key: Navigate to Project Settings → API Keys and copy the "anon public" key for `VITE_SUPABASE_ANON_KEY`
221+
222+
**VITE_POWERSYNC_URL:**
223+
1. Go to your [PowerSync Dashboard](https://powersync.journeyapps.com/)
224+
2. Select your project
225+
3. Navigate to your PowerSync instance
226+
4. Copy the "Instance URL" for `VITE_POWERSYNC_URL`

0 commit comments

Comments
 (0)