Skip to content

Use snippets, and Flutterflow polish #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 28, 2024
Merged

Use snippets, and Flutterflow polish #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a52388a
Fix numbering
benitav Nov 28, 2024
6b8fa3c
Use snippets
benitav Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 11 additions & 36 deletions installation/database-connection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,12 @@ title: "Database Connection"
description: "Connect a PowerSync Cloud instance to your backend database."
---

## Create a PowerSync Instance
import CreateCloudInstance from '/snippets/create-cloud-instance.mdx';
import SupabaseConnection from '/snippets/supabase-database-connection.mdx';

1. In the [PowerSync Dashboard](/usage/tools/powersync-dashboard) project tree (PowerSync Cloud), click on "**Create new instance**":
## Create a PowerSync Cloud Instance

<Frame>
<img src="/images/usage-12.png"/>
</Frame>

1. Give your instance a name, such as "Todolist Testing".
2. Under the "**General**" tab, you can change the default cloud region from "US" to "EU", "JP" (Japan), or "AU" (Australia) if desired (more cloud regions are available, [contact us](/resources/contact-us) if you need a different region).
3. Under the **"DB Connections"** tab, click on the **+** icon.
<CreateCloudInstance/>

Each provider has their quirks when it comes to specifying connection details, so we have documented provider-specific instructions below.

Expand All @@ -22,37 +17,17 @@ Each provider has their quirks when it comes to specifying connection details, s
Select your Postgres hosting provider for steps to connect your Postgres database to the newly created PowerSync instance:
<AccordionGroup>
<Accordion title="Supabase">
1. Get your connection details from Supabase:
* In your Supabase dashboard, navigate to **"Project Settings"** \-> **"Database" -> "Connection string**" and select the "URI" tab.
* Uncheck the "**Display connection pooler**" checkbox. PowerSync needs to connect to the database directly and cannot use the pooler.
<Frame>
<img src="/images/usage-13.avif"/>
</Frame>
* Copy the connection string. The hostname should be `db.<PROJECT-ID>.supabase.co`, and not, for example, `aws-0-us-west-1.pooler.supabase.com`.
* Paste this URI into the connection URI field.
* Enter the password for the `postgres` user in your Supabase database
* Supabase also [refers to this password](https://supabase.com/docs/guides/database/managing-passwords) as the _database password_ or _project password_.
* PowerSync has the Supabase CA certificate pre-configured — `verify-full` SSL mode can be used directly, without any custom certificates.
* If you want to query your database via the PowerSync dashboard, enable "_Allow querying in the editor?_".
1. Click **"Test Connection"** and fix any errors.
2. Under the **"Client Auth"** tab, enable **"Use Supabase Auth".**
3. Click **"Save".**

<Note>
The "Supabase Auth" setting no longer works for Supabase projects created after 25 November 2024. While we are working with Supabase on a fix, please apply this workaround: https://releases.powersync.com/announcements/important-notice-for-supabase-users-using-supabase-jwts
</Note>
<SupabaseConnection/>

PowerSync deploys and configures an isolated cloud environment for you, which can take a few minutes to complete.

### Troubleshooting
### Troubleshooting

Supabase is configured with a maximum of 4 logical replication slots, with one often used for Supabase Realtime.
Supabase is configured with a maximum of 4 logical replication slots, with one often used for Supabase Realtime.

It is therefore easy to run out of replication slots, resulting in an error such as "All replication slots are in use" when deploying. To resolve this, delete inactive replication slots by running this query:
It is therefore easy to run out of replication slots, resulting in an error such as "All replication slots are in use" when deploying. To resolve this, delete inactive replication slots by running this query:

```sql
select slot_name, pg_drop_replication_slot(slot_name) from pg_replication_slots where active = false;
```
```sql
select slot_name, pg_drop_replication_slot(slot_name) from pg_replication_slots where active = false;
```
</Accordion>
<Accordion title="AWS RDS">
1. [Locate the connection details from RDS](https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER%5FConnectToPostgreSQLInstance.html):
Expand Down
46 changes: 11 additions & 35 deletions integration-guides/flutterflow-+-powersync.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ description: "Integration guide for creating offline-first apps with FlutterFlow
sidebarTitle: Overview
---

import CreateCloudInstance from '/snippets/create-cloud-instance.mdx';
import SupabaseConnection from '/snippets/supabase-database-connection.mdx';

<Frame caption="Video walkthrough of the integration guide.">
<iframe width="1005" height="420" src="https://www.youtube.com/embed/eUcBCyPfVok?si=WFPfEp-86Dr_3qh_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</Frame>
Expand Down Expand Up @@ -74,37 +77,11 @@ create publication powersync for table public.lists;

## Configure PowerSync

### Connect PowerSync to Your Supabase

1. In the [PowerSync dashboard](/usage/tools/powersync-dashboard) Project tree, click on "**Create new instance**":

<Frame>
<img src="/images/integration-20.png" width="60%"/>
</Frame>

1. Give your instance a name, such as "Supabase Testing".
2. Under the "**General**" tab, you can change the default cloud region from US to EU, JP (Japan), or AU (Australia) if desired (more cloud regions are available, [contact us](/resources/contact-us) if you need a different region).
3. Under the "DB Connections" tab, click on the + icon.
4. Now we get the connection details from Supabase:
* In your Supabase dashboard, navigate to **"Project Settings"** \-> **"Database" -> "Connection string**" and select the "URI" tab.
* Uncheck the "**Display connection pooler**" checkbox. PowerSync needs to connect to the database directly and cannot use the pooler.
<Frame>
<img src="/images/integration-21.png"/>
</Frame>
It is important to uncheck this checkbox
* Copy the connection string. The hostname should be `db.<PROJECT-ID>.supabase.co`, and not, for example, `aws-0-us-west-1.pooler.supabase.com`.
* Paste this URI in PowerSync the instance **URI** field.
* Enter the password for the `postgres` user in your Supabase database: (Supabase also [refers to this password](https://supabase.com/docs/guides/database/managing-passwords) as the _database password_ or _project password_).
* PowerSync has the Supabase CA certificate pre-configured — `verify-full` SSL mode can be used directly, without any custom certificates.
1. Click **"Test Connection"** and fix any errors.
2. Under the **"Client Auth"** tab, enable **"Use Supabase Auth".**
3. Click **"Save".**
### Create a PowerSync Cloud Instance
<CreateCloudInstance />

<Note>
The "Supabase Auth" setting no longer works for Supabase projects created after 25 November 2024. While we are working with Supabase on a fix, please apply this workaround: https://releases.powersync.com/announcements/important-notice-for-supabase-users-using-supabase-jwts
</Note>

PowerSync deploys and configures an isolated cloud environment for you, which will take a few minutes to complete.
### Connect PowerSync to Your Supabase
<SupabaseConnection />

### Configure Sync Rules

Expand Down Expand Up @@ -676,19 +653,18 @@ Below is a list of known issues and limitations.

1. It's not currently possible to use the FlutterFlow Web Editor to test your app due to limitations with FlutterFlow.
2. When trying to compile any of the PowerSync Custom Actions, you will see errors — these can be safely ignored:

<Frame>
<img src="/images/integration-67.png" width="60%" />
</Frame>
<Frame>
<img src="/images/integration-69.png" width="60%" />
</Frame>
1. Using `watch()` queries creates a [StreamSubscription](https://api.flutter.dev/flutter/dart-async/StreamSubscription-class.html) and it's important to regularly call `.cancel()` on these to avoid multiple subscriptions for the same query running.
2. Deploying to the Apple App Store currently requires some workarounds due to limitations in FlutterFlow:
3. Using `watch()` queries creates a [StreamSubscription](https://api.flutter.dev/flutter/dart-async/StreamSubscription-class.html) and it's important to regularly call `.cancel()` on these to avoid multiple subscriptions for the same query running.
4. Deploying to the Apple App Store currently requires some workarounds due to limitations in FlutterFlow:
1. Download the code from FlutterFlow
2. Open the `Podfile` located in the `ios/`directory
3. The following option in the `Podfile` needs to be updated from `use_frameworks! :linkage => :static` to `use_frameworks!` (remove everything after the exclamation sign)
4. After removing that option, clean the build folder and build the project again.
5. You should now be able to submit to the App Store
3. Exporting the code from FlutterFlow using the "Download Code" action in FlutterFlow requires the same workaround listed in 4\. above.
4. Other common issues and troubleshooting techniques are documented here: [Troubleshooting](/resources/troubleshooting)
5. Exporting the code from FlutterFlow using the "Download Code" action in FlutterFlow requires the same workaround listed in 4\. above.
6. Other common issues and troubleshooting techniques are documented here: [Troubleshooting](/resources/troubleshooting)
42 changes: 8 additions & 34 deletions integration-guides/supabase-+-powersync.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ description: "Tutorial-style integration guide for creating offline-first apps w
sidebarTitle: Overview
---

import CreateCloudInstance from '/snippets/create-cloud-instance.mdx';
import SupabaseConnection from '/snippets/supabase-database-connection.mdx';

<Frame caption="Video walkthrough of the integration guide.">
<iframe width="1005" height="420" src="https://www.youtube.com/embed/80mnzGkeNgw?si=uVbQusPi3C2yy0Cu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</Frame>
Expand Down Expand Up @@ -106,43 +109,14 @@ create publication powersync for table public.lists, public.todos;
<Info>
**Note:** this guide uses the default `postgres` user in your Supabase account for replicating changes to PowerSync, since elevating custom roles to replication [has been disabled](https://github.com/orgs/supabase/discussions/9314) in Supabase. If you want to use a custom role for this purpose, contact the Supabase support team.
</Info>
## Configuring PowerSync

### Connect PowerSync to Your Supabase

1. In the [PowerSync Dashboard](/usage/tools/powersync-dashboard) Project tree, click on "**Create new instance**":

<Frame>
<img src="/images/integration-2.png" width="60%" />
</Frame>

2. Give your instance a name, such as "Supabase Testing".
3. Under the "**General**" tab, you can change the default cloud region from US to EU, JP (Japan), or AU (Australia) if desired (more cloud regions are available, [contact us](/resources/contact-us) if you need a different region).
4. Under the **"DB Connections"** tab, click on the **+** icon.
5. Now we get the connection details from Supabase:
* In your Supabase dashboard, navigate to **"Project Settings"** \-> **"Database" -> "Connection string**" and select the "URI" tab.
* Uncheck the "**Display connection pooler**" checkbox. PowerSync needs to connect to the database directly and cannot use the pooler.

<Frame>
<img src="/images/integration-3.png"/>
</Frame>
It is important to uncheck this checkbox
* Copy the connection string. The hostname should be `db.<PROJECT-ID>.supabase.co`, and not, for example, `aws-0-us-west-1.pooler.supabase.com`.
* Paste this URI in PowerSync instance URI field.
* Enter the password for the `postgres` user in your Supabase database: (Supabase also [refers to this password](https://supabase.com/docs/guides/database/managing-passwords) as the _database password_ or _project password_).
* PowerSync has the Supabase CA certificate pre-configured — `verify-full` SSL mode can be used directly, without any custom certificates.
6. Click **"Test Connection"** and fix any errors.
7. Under the **"Client Auth"** tab, enable **"Use Supabase Auth".**
<Frame caption="PowerSync fetches the Supabase JWT key directly from the database.">
<img src="/images/integration-4.png"/>
</Frame>
8. Click **"Save".**
## Configuring PowerSync

<Note>
The "Supabase Auth" setting no longer works for Supabase projects created after 25 November 2024. While we are working with Supabase on a fix, please apply this workaround: https://releases.powersync.com/announcements/important-notice-for-supabase-users-using-supabase-jwts
</Note>
### Create a PowerSync Cloud Instance
<CreateCloudInstance />

PowerSync deploys and configures an isolated cloud environment for you, which will take a few minutes to complete.
### Connect PowerSync to Your Supabase
<SupabaseConnection />

### Configure Sync Rules

Expand Down
10 changes: 10 additions & 0 deletions snippets/create-cloud-instance.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
1. In the [PowerSync Dashboard](/usage/tools/powersync-dashboard) Project tree, click on "**Create new instance**":

<Frame>
<img src="/images/integration-2.png" width="60%" />
</Frame>

2. Give your instance a name, such as "Testing".
3. Under the "**General**" tab, you can change the default cloud region from US to EU, JP (Japan), or AU (Australia) if desired.
* Note: More cloud regions are available, [contact us](/resources/contact-us) if you need a different region.
4. Under the **"DB Connections"** tab, click on the **+** icon and select your database technology.
24 changes: 24 additions & 0 deletions snippets/supabase-database-connection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@

1. Copy the database connection details from Supabase:
* In your Supabase dashboard, navigate to **"Project Settings"** \-> **"Database" -> "Connection string**" and select the "URI" tab.
* Uncheck the "**Display connection pooler**" checkbox. PowerSync needs to connect to the database directly and cannot use the pooler.
<Frame caption="It is important to uncheck this checkbox">
<img src="/images/integration-3.png"/>
</Frame>
* Copy the connection string. The hostname should be `db.<PROJECT-ID>.supabase.co`, and not, for example, `aws-0-us-west-1.pooler.supabase.com`.
* Paste this URI in PowerSync instance **URI** field.
* Enter the **Password** for the `postgres` user in your Supabase database.
* Supabase also [refers to this password](https://supabase.com/docs/guides/database/managing-passwords) as the _database password_ or _project password_.
* PowerSync has the Supabase CA certificate pre-configured — `verify-full` SSL mode can be used directly, without any custom certificates.
2. Click **"Test Connection"** and fix any errors.
3. Under the **"Client Auth"** tab, enable **"Use Supabase Auth"**:
<Frame caption="PowerSync fetches the Supabase JWT key directly from the database.">
<img src="/images/integration-4.png"/>
</Frame>
4. Click **"Save".**

<Note>
The "Supabase Auth" setting no longer works for Supabase projects created after 25 November 2024. While we are working with Supabase on a fix, please apply this workaround: https://releases.powersync.com/announcements/important-notice-for-supabase-users-using-supabase-jwts
</Note>

PowerSync deploys and configures an isolated cloud environment for you, which will take a few minutes to complete.