Merge branch 'docs' into postgres-bucket-storage

Author: benitav

client-sdk-references/react-native-and-expo/react-native-web-support.mdx

@@ -7,36 +7,34 @@ title: "React Native Web Support"
 Support for React Native Web is available since versions 1.12.1 of the [PowerSync React Native SDK](/client-sdk-references/react-native-and-expo) and 1.8.0 if the [JavaScript/Web SDK](/client-sdk-references/javascript-web), and is currently in a **beta** release.
 
 A demo app showcasing this functionality is available here:
-<Card
-  title="powersync-js/demos/react-native-web-supabase-todolist"
-  icon="github"
-  href="https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-web-supabase-todolist"
-  horizontal
-/>
+
+<Card title="powersync-js/demos/react-native-web-supabase-todolist" icon="github" href="https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-web-supabase-todolist" horizontal />
 
 ## Configuring PowerSync in your React Native for Web project
 
 To ensure that PowerSync features are fully supported in your React Native Web project, follow the below steps. This documentation covers necessary web worker configurations, database instantiation, and multi-platform implementations.
 
-### 1\. Install Web SDK
+### 1. Install Web SDK
 
 The [PowerSync Web SDK](/client-sdk-references/javascript-web), alongside the [PowerSync React Native SDK](/client-sdk-references/react-native-and-expo), is required for Web support.
 
 See installation instructions [here](https://www.npmjs.com/package/@powersync/web).
 
-### 2\. Configure Web Workers
+### 2. Configure Web Workers
 
 For React Native for Web, workers need to be configured when instantiating `PowerSyncDatabase`. An example of this is available [here](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-native-web-supabase-todolist/library/powersync/system.ts).
 
 To do this, copy the contents of `node_modules/@powersync/web/dist` to the root of your project (typically in the `public `directory). To make it easier to manage these files in the `public` directory, it is recommended to place the contents in a nested directory like `@powersync`.
 
-You can run the following bash command to automate the copying process. It will create copy the contents to `/public/@powersync`.
+The [`@powersync/web`](https://github.com/powersync-ja/powersync-js/tree/main/packages/web) package includes a CLI utility which can copy the required assets to the `public` directory (configurable with the `--output` option).
 
 ```bash
-mkdir -p public/@powersync && cp -r node_modules/@powersync/web/dist/* public/@powersync/
+# Places assets into public/@powersync by default. Override with `--output path/from_current_working_dir`.
+npx powersync-web copy-assets
+# or pnpm powersync-web copy-assets
 ```
 
-### 3\. Instantiate Web Workers
+### 3. Instantiate Web Workers
 
 The example below demonstrates how to instantiate the workers (PowerSync requires a database and a sync worker) when instantiating `PowerSyncDatabase`. You can either specify a path to the worker (they are available in the `worker` directory of the `dist` contents), or provide a factory function to create the worker.
 
@@ -82,7 +80,7 @@ this.powersync = new PowerSyncDatabaseWeb({
 
 This `PowerSyncDatabaseWeb` database will be used alongside the native `PowerSyncDatabase` to support platform-specific implementations. See the [Instantiating PowerSync](/client-sdk-references/react-native-and-expo/react-native-web-support#implementations) section below for more details.
 
-### 4\. Enable multiple platforms
+### 4. Enable multiple platforms
 
 To target both mobile and web platforms, you need to adjust the Metro configuration and handle platform-specific libraries accordingly.
 
@@ -192,6 +190,7 @@ export async function prompt(
 ```
 
 Which can then be used agnostically in a component.
+
 ```js
 import { Button } from 'react-native';
 import { prompt } from 'util/prompt';
@@ -214,15 +213,17 @@ import { prompt } from 'util/prompt';
   }}
 />;
 ```
-### 5\. Configure UMD target
+
+### 5. Configure UMD target
 
 React Native Web requires the UMD target of `@powersync/web` (available at `@powersync/web/umd`). To fully support this target version, configure the following in your project:
 
 1. Add `config.resolver.unstable_enablePackageExports = true;` to your `metro.config.js` file.
+
 2. TypeScript projects: In the `tsconfig.json` file specify the `moduleResolution` to be `Bundler`.
 
 ```json
  "compilerOptions": {
     "moduleResolution": "Bundler"
   }
-```
+```

images/integration-guides/powersync-supabase-connection.png

@@ -1,31 +1,38 @@
-1. In your Supabase Dashboard, click **Connect** in the top bar:
-  
-   <Frame>
-     <img src="/images/installation/supabase-connect-database.png" />
-   </Frame>
+1. From your Supabase Dashboard, select **Connect** in the top navigation bar:
 
-   * Under **Direct connection**, 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`.
-  
-   <Frame>
-     <img src="/images/installation/supabase-connection-string.png" />
-   </Frame>
+  <Frame>
+    <img src="/images/installation/supabase-connect-database.png" />
+  </Frame>
+
+   * In the **Direct connection** section, copy the complete connection string (including the `[YOUR-PASSWORD]` placeholder)
+
+  <Frame>
+    <img src="/images/installation/supabase-connection-string.png" />
+  </Frame>
 
-   * Paste this URI in PowerSync instance **URI** field.
+   * Paste the connection string into the PowerSync instance **URI** field. PowerSync will automatically parse this URI to populate the connection details.
 
-   * Enter the **Password** for the `postgres` user in your Supabase database.
+   * For the **Password** field, enter your database's `postgres` user password (this is your database/project password, not your Supabase account password). Need help? Check Supabase's guide on [managing database passwords](https://supabase.com/docs/guides/database/managing-passwords).
 
-     * Supabase also [refers to this password](https://supabase.com/docs/guides/database/managing-passwords) as the *database password* or *project password*.
+   * Note: PowerSync includes Supabase's CA certificate by default, so you can use `verify-full` SSL mode without additional configuration.
+
+  Your connection settings should look similar to this:
+
+  <Frame>
+    <img src="/images/integration-guides/powersync-supabase-connection.png" />
+  </Frame>
 
-   * PowerSync has the Supabase CA certificate pre-configured — `verify-full` SSL mode can be used directly, without any custom certificates.
+2. Verify your setup by clicking **Test Connection** and resolve any errors.
 
-2. Click **Test Connection** and fix any errors.
+3. Configure authentication:
+   * Navigate to the **Client Auth** tab
+   * Enable **Use Supabase Auth**
+   * Enter your Supabase **JWT Secret**
 
-3. Under the **Client Auth** tab, enable **Use Supabase Auth** and enter your Supabase **JWT Secret**:
-  
-  <Frame caption="PowerSync uses the secret to verify Supabase's JWTs">
+  <Frame caption="PowerSync will use this secret to validate Supabase JWTs">
     <img src="/images/authentication/use-supabase-auth.png" />
   </Frame>
 
-4. Click **Save and deploy** to deploy the updates to your instance.
+4. Click **Save and deploy** to apply your changes.
 
-PowerSync deploys and configures an isolated cloud environment for you, which will take a few minutes to complete.
+PowerSync will now create an isolated cloud environment for your instance. This process typically takes a few minutes.