Skip to content

Commit 6641232

Browse files
authored
Merge pull request #321 from HeinrichvonStein/rn-supabase-todolist-readme
2 parents 631d66a + 57beec3 commit 6641232

File tree

1 file changed

+25
-47
lines changed
  • demos/react-native-supabase-todolist

1 file changed

+25
-47
lines changed

demos/react-native-supabase-todolist/README.md

+25-47
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,50 @@
55
Demo app demonstrating use of the [PowerSync SDK for React Native](https://www.npmjs.com/package/@powersync/react-native) together with Supabase.
66

77
A step-by-step guide on Supabase<>PowerSync integration is available [here](https://docs.powersync.com/integration-guides/supabase).
8+
Follow all the steps until, but not including, [Test Everything (Using Our Demo App)](https://docs.powersync.com/integration-guides/supabase-+-powersync#test-everything-using-our-demo-app).
89

9-
## Set up Supabase Project
10+
## Getting Started
1011

11-
Create a new Supabase project, and paste and run the contents of [database.sql](./database.sql) in the Supabase SQL editor.
12+
In the repo directory, use [pnpm](https://pnpm.io/installation) to install dependencies:
1213

13-
It does the following:
14-
15-
1. Create `lists` and `todos` tables.
16-
2. Create a publication called `powersync` for `lists` and `todos`.
17-
3. Enable row level security and storage policies, allowing users to only view and edit their own data.
18-
4. Create a trigger to populate some sample data when a user registers.
19-
20-
## Set up PowerSync Instance
21-
22-
Create a new PowerSync instance, connecting to the database of the Supabase project (find detailed instructions in the [Supabase<>PowerSync integration guide](https://docs.powersync.com/integration-guides/supabase)).
23-
24-
Then deploy the following sync rules:
25-
26-
```yaml
27-
bucket_definitions:
28-
user_lists:
29-
# Separate bucket per todo list
30-
parameters: select id as list_id from lists where owner_id = request.user_id()
31-
data:
32-
- select * from lists where id = bucket.list_id
33-
- select * from todos where list_id = bucket.list_id
14+
```bash
15+
pnpm install
16+
pnpm build:packages
3417
```
3518

36-
## Configure The App
37-
38-
Replace the necessary credentials in the [.env](./.env) file.
39-
Generally, the `.env` file is used for storing common environment variables shared across all instances of the application, while `.env.local` is for overriding or providing environment-specific configurations, particularly for local development.
40-
As `.env.local` is normally not checked into source control (this project has a git-ignore rule), you can copy `.env`, name it `.env.local`, and then configure as needed.
19+
Then switch into the demo's directory:
4120

42-
### EAS Build configuration
43-
44-
Take note that you will need an [Expo](https://expo.dev/) account if you want to use EAS for your builds. The Expo project ID should then also be configured in the environment file.
45-
46-
For secret/sensitive environment variables which shouldn't be checked into source control, you can configure them as EAS secrets. They can be added via either the Expo website or the EAS CLI, both are explained [here](https://docs.expo.dev/build-reference/variables/#using-secrets-in-environment-variables).
47-
48-
General information on defining environment variables with Expo can be found here [here](https://docs.expo.dev/build-reference/variables/#can-eas-build-use-env-files).
49-
50-
## Run the App
21+
```bash
22+
cd demos/react-native-supabase-todolist
23+
```
5124

52-
Install the dependencies, including the React Native SDK:
25+
Set up the Environment variables: Copy the `.env` file:
5326

54-
```sh
55-
pnpm i
27+
```bash
28+
cp .env .env.local
5629
```
5730

31+
And then edit `.env.local` to insert your credentials for Supabase.
32+
5833
Run on iOS
5934

6035
```sh
6136
pnpm ios
6237
```
6338

64-
Run on Android
39+
Run on Android (see [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment?platform=android) to allow you to develop with Android emulators and iOS simulators).
6540

6641
```sh
6742
pnpm android
6843
```
6944

70-
## Here are some helpful links
45+
### EAS Build configuration
46+
47+
General information on defining environment variables with Expo can be found here [here](https://docs.expo.dev/build-reference/variables/#can-eas-build-use-env-files).
48+
49+
## Learn More
50+
51+
Check out [the PowerSync SDK for React Native on GitHub](https://github.com/powersync-ja/powersync-js/tree/main/packages/react-native) - your feedback and contributions are welcome!
52+
53+
To learn more about PowerSync, see the [PowerSync docs](https://docs.powersync.com).
7154

72-
- [PowerSync Website](https://www.powersync.com/)
73-
- [PowerSync Docs](https://docs.powersync.com/)
74-
- [PowerSync React Native Client SDK Reference](https://docs.powersync.com/client-sdk-references/react-native-and-expo)
75-
- [Supabase Docs](https://supabase.com/docs)
76-
- [Expo Docs](https://docs.expo.dev/)

0 commit comments

Comments
 (0)