|
5 | 5 | Demo app demonstrating use of the [PowerSync SDK for React Native](https://www.npmjs.com/package/@powersync/react-native) together with Supabase.
|
6 | 6 |
|
7 | 7 | 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). |
8 | 9 |
|
9 |
| -## Set up Supabase Project |
| 10 | +## Getting Started |
10 | 11 |
|
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: |
12 | 13 |
|
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 |
34 | 17 | ```
|
35 | 18 |
|
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: |
41 | 20 |
|
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 | +``` |
51 | 24 |
|
52 |
| -Install the dependencies, including the React Native SDK: |
| 25 | +Set up the Environment variables: Copy the `.env` file: |
53 | 26 |
|
54 |
| -```sh |
55 |
| -pnpm i |
| 27 | +```bash |
| 28 | +cp .env .env.local |
56 | 29 | ```
|
57 | 30 |
|
| 31 | +And then edit `.env.local` to insert your credentials for Supabase. |
| 32 | + |
58 | 33 | Run on iOS
|
59 | 34 |
|
60 | 35 | ```sh
|
61 | 36 | pnpm ios
|
62 | 37 | ```
|
63 | 38 |
|
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). |
65 | 40 |
|
66 | 41 | ```sh
|
67 | 42 | pnpm android
|
68 | 43 | ```
|
69 | 44 |
|
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). |
71 | 54 |
|
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