You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* fixed minimum node version requirement for vite 7
* remove unnecessary .degitignore
* update README to include demo GIF and enhance project description
* update README with correct links for PowerSync and Supabase sign-up
* fix: update demo GIF link in README
* chore: update README for improved link formatting and clarity in setup instructions
* removed demo.gif
* enhance README: reorganize setup instructions for PowerSync, swopping the order of setting up PowerSync through the dashboard and cli. Also added quick access links for Supabase settings
* refactor(README): convert all HTML links back to standard Markdown hyperlinks
---------
Co-authored-by: joshua-journey-apps <joshua@journeyapps.com>
Co-authored-by: Michael Barnes <michael@journeyapps.com>
> **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).
29
37
30
-
3. Clone the repository directly and install dependencies:
<summary><strong>4. Start with bolt.new</strong></summary>
53
+
54
+
Start the project using [bolt.new](https://bolt.new):
37
55
38
56
- Open this [link](https://bolt.new/github.com/powersync-community/vite-react-ts-powersync-supabase/tree/main) to load the project.
39
-
- You will see a configuration error in the preview window because the `.env` file has not yet been defined.
40
-
- 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").
41
59
- Save the file — the app should launch automatically.
42
60
61
+
</details>
62
+
43
63
## Usage
44
64
45
65
After cloning the repository, navigate to the project directory and install the dependencies:
46
66
47
-
```bash
48
-
cd vite-react-ts-powersync-supabase
49
-
npm install
50
-
npm run dev
51
-
```
67
+
```bash
68
+
cd vite-react-ts-powersync-supabase
69
+
npm install
70
+
npm run dev
71
+
```
52
72
53
-
##Setup Backend
73
+
# Setup Backend
54
74
55
-
###1. Setup Supabase
75
+
## 1. Setup Supabase
56
76
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)).
57
77
58
-
#### Setup using the Supabase Dashboard
78
+
<details>
79
+
<summary><strong>Option 1: Setup using the Supabase Dashboard</strong></summary>
80
+
59
81
1.[Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).
60
-
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.
82
+
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.
61
83
3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers) (demo specific)
62
84
63
-
#### Setup using the Supabase CLI (optional)
85
+
</details>
86
+
87
+
<details>
88
+
<summary><strong>Option 2: Setup using the Supabase CLI</strong></summary>
89
+
64
90
If you prefer using the Supabase CLI, you can set up your project as follows:
65
91
1. Login to your Supabase Account `npx supabase login`
66
92
2. Initialize your project `npx supabase init`
67
93
3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers)
68
94
4. Copy your project ID from the Supabase dashboard [here](https://supabase.com/dashboard/project/_/settings/general)
69
95
5. Link your local project `npx supabase link --project-ref <project-id>`
70
-
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.
96
+
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.
71
97
7. Push your tables to the cloud db
72
98
```shell
73
99
npx supabase db push
74
100
```
75
101
76
-
### 2. Create PowerSync Instance and Connect to Supabase
102
+
</details>
103
+
104
+
# Setup PowerSync
105
+
106
+
## 2. Create PowerSync Instance and Connect to Supabase
77
107
78
108
You can set up your PowerSync instance using either the Dashboard or CLI approach:
79
109
80
-
#### Option 1: Using PowerSync [CLI](https://docs.powersync.com/usage/tools/cli)
110
+
<details>
111
+
<summary><strong>Option 1: Setup using the PowerSync Dashboard</strong></summary>
112
+
113
+
If you prefer using the web interface:
114
+
115
+
1. In the [PowerSync dashboard](https://powersync.journeyapps.com/), create a new PowerSync instance:
116
+
- Right-click on 'PowerSync Project' in the project tree on the left and click "Create new instance"
117
+
- Pick a name for the instance e.g. "PowerSyncDemoInstance" and proceed.
118
+
119
+
2. In the "Edit Instance" dialog that follows, click on the "Connections" tab:
120
+
- Click on the "+" button to create a new database connection.
121
+
- 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.
122
+
- Click the "Test connection" button and you should see "Connection success!"
123
+
124
+
3. Click on the "Credentials" tab of the "Edit Instance" dialog:
125
+
- Tick the "Use Supabase Auth" checkbox and configure the JWT secret.
126
+
- Click "Save" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.
127
+
128
+
</details>
129
+
130
+
<details>
131
+
<summary><strong>Option 2: Setup using the PowerSync CLI</strong></summary>
81
132
82
-
> This PowerSync CLI only works with **PowerSync Cloud instances.**
133
+
See [PowerSync CLI docs](https://docs.powersync.com/usage/tools/cli).
134
+
135
+
> This PowerSync CLI only works with **PowerSync Cloud instances.**
83
136
> The CLI currently does not support **self-hosted PowerSync instances.**
84
137
85
138
If you don't have a PowerSync account yet, [sign up here](https://accounts.journeyapps.com/portal/powersync-signup).
@@ -116,29 +169,57 @@ Follow the prompts to configure:
116
169
117
170
> 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.
118
171
119
-
#### Option 2: Using PowerSync Dashboard
172
+
</details>
120
173
121
-
If you prefer using the web interface:
174
+
## 3. Deploy Sync Rules
122
175
123
-
1. In the [PowerSync dashboard](https://powersync.journeyapps.com/), create a new PowerSync instance:
124
-
- Right-click on 'PowerSync Project' in the project tree on the left and click "Create new instance"
125
-
- Pick a name for the instance e.g. "Yjs Demo Test" and proceed.
126
-
127
-
2. In the "Edit Instance" dialog that follows, click on the "Connections" tab:
128
-
- Click on the "+" button to create a new database connection.
129
-
- 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.
130
-
- Click the "Test connection" button and you should see "Connection success!"
176
+
<details>
177
+
<summary><strong>Option 1: Using CLI (if you used CLI setup above)</strong></summary>
131
178
132
-
3. Click on the "Credentials" tab of the "Edit Instance" dialog:
133
-
- Tick the "Use Supabase Auth" checkbox and configure the JWT secret.
134
-
- Click "Save" to save all the changes to your PowerSync instance. The instance will now be deployed — this may take a minute or two.
179
+
The sync rules are already deployed if you followed the CLI setup steps above.
135
180
136
-
### 3. Deploy Sync Rules
181
+
</details>
137
182
138
-
#### Option 1: Using CLI (if you used CLI setup above)
139
-
The sync rules are already deployed if you followed the CLI setup steps above.
183
+
<details>
184
+
<summary><strong>Option 2: Using Dashboard</strong></summary>
140
185
141
-
#### Option 2: Using Dashboard
142
-
1. Open the [`sync-rules.yaml`](sync-rules.yaml) in this repo and copy the contents.
186
+
1. Open the [sync-rules.yaml](sync-rules.yaml) in this repo and copy the contents.
143
187
2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the 'sync-rules.yaml' editor panel.
144
-
3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
188
+
3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
189
+
190
+
</details>
191
+
192
+
## 4. Set up environment
193
+
194
+
First, copy the environment template file:
195
+
```bash
196
+
cp .env.local.template .env.local
197
+
```
198
+
199
+
Then set the following environment variables in your `.env.local` file:
200
+
201
+
```bash
202
+
VITE_SUPABASE_URL=
203
+
VITE_SUPABASE_ANON_KEY=
204
+
VITE_POWERSYNC_URL=
205
+
```
206
+
207
+
### How to get these values:
208
+
209
+
**VITE_SUPABASE_URL & VITE_SUPABASE_ANON_KEY:**
210
+
211
+
**Quick Access:** For convenience, you can access both settings directly:
0 commit comments