Skip to content

Commit baac7be

Browse files
simolus3benitav
andauthored
Add quickstart guide for nodejs SDK (#131)
* Add quickstart guide for nodejs SDK * NodeJS -> Node.js * Adds .net placeholders * Ref repeatable snippets * Flutterflow polish --------- Co-authored-by: benitav <[email protected]> Co-authored-by: benitav <[email protected]>
1 parent 4439c6e commit baac7be

17 files changed

+408
-42
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,14 @@ We use the following icons for the SDKs and backend databases:
4949
- Web: `icon="js"`
5050
- Kotlin: `icon="k"`
5151
- Swift: `icon="swift"`
52+
- Node.js: `icon="node-js"`
53+
- .NET: `icon="wave-sine"`
5254

5355
#### Some useful references:
5456
- Writing content: https://mintlify.com/docs/page
5557
- Available components: https://mintlify.com/docs/content/components/accordions
5658
- Global settings: https://mintlify.com/docs/settings/global
59+
- Reusable Snippets for repeated content: https://mintlify.com/docs/reusable-snippets
5760

5861
### Publishing Changes
5962

client-sdk-references/dotnet.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: ".NET (closed alpha)"
3+
description: "SDK reference for using PowerSync in .NET clients."
4+
sidebarTitle: Overview
5+
---
6+
7+
<Note>
8+
Our .NET client SDK is currently in a closed alpha release for early testing with select customers. You can explore the repo [here](https://github.com/powersync-ja/powersync-dotnet), however it is not yet officially published so expect breaking changes and instability as development continues.
9+
</Note>

client-sdk-references/introduction.mdx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,8 @@ title: "Introduction"
33
description: "PowerSync supports multiple client-side frameworks with official SDKs"
44
---
55

6+
import ClientSdks from '/snippets/client-sdks.mdx';
7+
68
Select your client framework for the full SDK reference, getting started instructions and example code:
79

8-
<CardGroup cols={3}>
9-
<Card title="Flutter" icon="flutter" href="/client-sdk-references/flutter">
10-
</Card>
11-
<Card title="React Native & Expo" icon="react" href="/client-sdk-references/react-native-and-expo">
12-
</Card>
13-
<Card title="JavaScript/Web" icon="js" href="/client-sdk-references/javascript-web">
14-
</Card>
15-
<Card title="Kotlin Multiplatform" icon="k" href="/client-sdk-references/kotlin-multiplatform">
16-
Currently in a beta release.
17-
</Card>
18-
<Card title="Swift" icon="swift" href="/client-sdk-references/swift">
19-
Currently in a beta release.
20-
</Card>
21-
</CardGroup>
10+
<ClientSdks />

client-sdk-references/node.mdx

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: "Node.js client (alpha)"
3+
description: "SDK reference for using PowerSync in Node.js clients."
4+
sidebarTitle: Overview
5+
---
6+
7+
<Note>
8+
This page describes the PowerSync _client_ SDK for Node.js.
9+
If you're interested in using PowerSync for your Node.js backend, no special package is required.
10+
Instead, follow our guides on [app backend setup](/installation/app-backend-setup).
11+
</Note>
12+
13+
<CardGroup>
14+
<Card title="PowerSync SDK on NPM" icon="npm" href="https://www.npmjs.com/package/@powersync/node">
15+
This SDK is distributed via NPM [\[External link\].](https://www.npmjs.com/package/@powersync/node)
16+
</Card>
17+
18+
<Card title="Source Code" icon="github" href="https://github.com/powersync-ja/powersync-js/tree/main/packages/node">
19+
Refer to packages/node in the powersync-js repo on GitHub.
20+
</Card>
21+
22+
<Card title="API Reference" icon="book" href="https://powersync-ja.github.io/powersync-js/node-sdk">
23+
Full API reference for the PowerSync SDK [\[External link\].](https://powersync-ja.github.io/powersync-js/node-sdk)
24+
</Card>
25+
26+
<Card title="Example Project" icon="code" href="https://github.com/powersync-ja/powersync-js/tree/main/demos/example-node">
27+
A small CLI app showcasing bidirectional sync.
28+
</Card>
29+
</CardGroup>
30+
31+
## SDK Features
32+
33+
* Provides real-time streaming of database changes.
34+
* Offers direct access to the SQLite database, enabling the use of SQL on both client and server sides.
35+
* Operations run on a background worker and are asynchronous by default, enabling concurrent queries.
36+
* Enables subscription to queries for receiving live updates.
37+
* Eliminates the need for client-side database migrations as these are managed automatically.
38+
39+
## Quickstart
40+
41+
To start using PowerSync in a Node client, first add the dependencies:
42+
43+
<Tabs>
44+
<Tab title="npm">
45+
```bash
46+
npm install @powersync/node
47+
```
48+
</Tab>
49+
<Tab title="yarn">
50+
```bash
51+
yarn add @powersync/node
52+
```
53+
</Tab>
54+
<Tab title="pnpm">
55+
```bash
56+
pnpm install @powersync/node
57+
```
58+
</Tab>
59+
</Tabs>
60+
61+
Depending on the package manager used, you might have to approve install scripts.
62+
PowerSync currently requires install scripts on the `@powersync/node` and `@powersync/better-sqlite3` packages
63+
to download native addons.
64+
65+
Next, make sure that you have:
66+
67+
* Signed up for a PowerSync Cloud account ([here](https://accounts.journeyapps.com/portal/powersync-signup?s=docs)) or [self-host PowerSync](/self-hosting/getting-started).
68+
* [Configured your backend database](/installation/database-setup) and connected it to your PowerSync instance.
69+
70+
### 1. Define the schema
71+
72+
The first step is defining the schema for the local SQLite database.
73+
74+
This schema represents a "view" of the downloaded data. No migrations are required — the schema is applied directly when the local PowerSync database is constructed (as we'll show in the next step).
75+
You can use [this example](https://github.com/powersync-ja/powersync-js/blob/e5a57a539150f4bc174e109d3898b6e533de272f/demos/example-node/src/powersync.ts#L47-L77) as a reference when defining your schema.
76+
77+
<Info>
78+
**Generate schema automatically**
79+
80+
In the [dashboard](/usage/tools/powersync-dashboard), the schema can be generated based off your sync rules by right-clicking on an instance and selecting **Generate client-side schema**.
81+
Select JavaScript and replace the suggested import with `@powersync/node`.
82+
83+
Similar functionality exists in the [CLI](/usage/tools/cli).
84+
</Info>
85+
86+
### 2. Instantiate the PowerSync Database
87+
88+
Next, you need to instantiate the PowerSync database — this is the core managed database.
89+
90+
Its primary functions are to record all changes in the local database, whether online or offline. In addition, it automatically uploads changes to your app backend when connected.
91+
92+
**Example**:
93+
94+
```js
95+
import { PowerSyncDatabase } from '@powersync/node';
96+
import { Connector } from './Connector';
97+
import { AppSchema } from './Schema';
98+
99+
export const db = new PowerSyncDatabase({
100+
// The schema you defined in the previous step
101+
schema: AppSchema,
102+
database: {
103+
// Filename for the SQLite database — it's important to only instantiate one instance per file.
104+
dbFilename: 'powersync.db',
105+
// Optional. Directory where the database file is located.'
106+
// dbLocation: 'path/to/directory'
107+
},
108+
});
109+
```
110+
111+
### 3. Integrate with your Backend
112+
113+
The PowerSync backend connector provides the connection between your application backend and the PowerSync client-slide managed SQLite database.
114+
115+
It is used to:
116+
117+
1. Retrieve an auth token to connect to the PowerSync instance.
118+
2. Apply local changes on your backend application server (and from there, to Postgres)
119+
120+
Accordingly, the connector must implement two methods:
121+
122+
1. [PowerSyncBackendConnector.fetchCredentials](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L16) - This is called every couple of minutes and is used to obtain credentials for your app backend API. -> See [Authentication Setup](/installation/authentication-setup) for instructions on how the credentials should be generated.
123+
2. [PowerSyncBackendConnector.uploadData](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L24) - Use this to upload client-side changes to your app backend.
124+
-> See [Writing Client Changes](/installation/app-backend-setup/writing-client-changes) for considerations on the app backend implementation.
125+
126+
**Example**:
127+
128+
```js
129+
import { UpdateType } from '@powersync/node';
130+
131+
export class Connector implements PowerSyncBackendConnector {
132+
constructor() {
133+
// Setup a connection to your server for uploads
134+
this.serverConnectionClient = TODO;
135+
}
136+
137+
async fetchCredentials() {
138+
// Implement fetchCredentials to obtain a JWT from your authentication service.
139+
// See https://docs.powersync.com/installation/authentication-setup
140+
// If you're using Supabase or Firebase, you can re-use the JWT from those clients, see
141+
// - https://docs.powersync.com/installation/authentication-setup/supabase-auth
142+
// - https://docs.powersync.com/installation/authentication-setup/firebase-auth
143+
return {
144+
endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
145+
// Use a development token (see Authentication Setup https://docs.powersync.com/installation/authentication-setup/development-tokens) to get up and running quickly
146+
token: 'An authentication token'
147+
};
148+
}
149+
150+
async uploadData(database) {
151+
// Implement uploadData to send local changes to your backend service.
152+
// You can omit this method if you only want to sync data from the database to the client
153+
154+
// See example implementation here: https://docs.powersync.com/client-sdk-references/javascript-web#3-integrate-with-your-backend
155+
}
156+
}
157+
```
158+
159+
With your database instantiated and your connector ready, call `connect` to start the synchronization process:
160+
161+
```js
162+
await db.connect(new Connector());
163+
await db.waitForFirstSync(); // Optional, to wait for a complete snapshot of data to be available
164+
```
165+
166+
## Usage
167+
168+
After connecting the client database, it is ready to be used. The API to run queries and updates is identical to our
169+
[web SDK](/client-sdk-references/javascript-web#using-powersync%3A-crud-functions):
170+
171+
```js
172+
// Use db.get() to fetch a single row:
173+
console.log(await db.get('SELECT powersync_rs_version();'));
174+
175+
// Or db.all() to fetch all:
176+
console.log(await db.all('SELECT * FROM lists;'));
177+
178+
// Use db.watch() to watch queries for changes:
179+
const watchLists = async () => {
180+
for await (const rows of db.watch('SELECT * FROM lists;')) {
181+
console.log('Has todo lists', rows.rows!._array);
182+
}
183+
};
184+
watchLists();
185+
186+
// And db.execute for inserts, updates and deletes:
187+
await db.execute(
188+
"INSERT INTO lists (id, created_at, name, owner_id) VALUEs (uuid(), datetime('now'), ?, uuid());",
189+
['My new list']
190+
);
191+
```
192+
193+
PowerSync runs queries asynchronously on a background pool of workers and automatically configures WAL to
194+
allow a writer and multiple readers to operate in parallel.
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: "JavaScript ORM Support"
3+
url: /client-sdk-references/javascript-web/javascript-orm
4+
sidebarTitle: "ORM Support"
5+
---

installation/client-side-setup.mdx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,34 @@ Please see the steps based on your app framework:
207207
<Card title="Swift (Beta)" icon="swift" href="/client-sdk-references/swift" horizontal />
208208
</Accordion>
209209

210+
<Accordion title="Node.js" icon="node-js">
211+
Add the [PowerSync Node NPM package](https://www.npmjs.com/package/@powersync/node) to your project:
212+
213+
<Tabs>
214+
<Tab title="npm">
215+
```bash
216+
npm install @powersync/node
217+
```
218+
</Tab>
219+
220+
<Tab title="yarn">
221+
```bash
222+
yarn add @powersync/node
223+
```
224+
</Tab>
225+
226+
<Tab title="pnpm">
227+
```bash
228+
pnpm install @powersync/node
229+
```
230+
</Tab>
231+
</Tabs>
232+
233+
See the full SDK reference for further details and getting started instructions:
234+
235+
<Card title="Node.js (client)" icon="node-js" href="/client-sdk-references/node" horizontal />
236+
</Accordion>
237+
210238
## Next Steps
211239

212240
For an overview of the client-side steps required to set up PowerSync in your app, continue reading the next sections.

installation/client-side-setup/define-your-schema.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,14 @@ For an example implementation of the client-side schema, see the _Getting Starte
2727

2828
* [1\. Define the Schema](/client-sdk-references/react-native-and-expo#1-define-the-schema)
2929

30-
### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
30+
### <Icon icon="js" iconType="solid" size="24"/> JavaScript/Web
3131

3232
* [1\. Define the Schema](/client-sdk-references/javascript-web#1-define-the-schema)
3333

34+
### <Icon icon="node-js" iconType="solid" size="24"/> JavaScript/Node.js (alpha)
35+
36+
* [1\. Define the Schema](/client-sdk-references/node#1-define-the-schema)
37+
3438
### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
3539

3640
* [1\. Define the Schema](/client-sdk-references/kotlin-multiplatform#1-define-the-schema)
@@ -39,6 +43,7 @@ For an example implementation of the client-side schema, see the _Getting Starte
3943

4044
* [1\. Define the Schema](/client-sdk-references/swift#1-define-the-schema)
4145

46+
4247
## ORM Support
4348

4449
For details on ORM support in PowerSync, refer to [Using ORMs with PowerSync](https://www.powersync.com/blog/using-orms-with-powersync) on our blog.

installation/client-side-setup/instantiate-powersync-database.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,14 @@ For an example implementation of instantiating the client-side database, see the
1717

1818
* [2\. Instantiate the PowerSync Database](/client-sdk-references/react-native-and-expo#2-instantiate-the-powersync-database)
1919

20-
### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
20+
### <Icon icon="js" iconType="solid" size="24"/> JavaScript/Web
2121

2222
* [2\. Instantiate the PowerSync Database](/client-sdk-references/javascript-web#2-instantiate-the-powersync-database)
2323

24+
### <Icon icon="node-js" iconType="solid" size="24"/> JavaScript/Node.js (alpha)
25+
26+
* [2\. Instantiate the PowerSync Database](/client-sdk-references/node#2-instantiate-the-powersync-database)
27+
2428
### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
2529

2630
* [2\. Instantiate the PowerSync Database](/client-sdk-references/kotlin-multiplatform#2-instantiate-the-powersync-database)

installation/client-side-setup/integrating-with-your-backend.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,14 @@ For an example implementation of a PowerSync 'backend connector', see the _Getti
2727

2828
* [3\. Integrate with your Backend](/client-sdk-references/react-native-and-expo#3-integrate-with-your-backend)
2929

30-
### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
30+
### <Icon icon="js" iconType="solid" size="24"/> JavaScript/Web
3131

3232
* [3\. Integrate with your Backend](/client-sdk-references/javascript-web#3-integrate-with-your-backend)
3333

34+
### <Icon icon="node-js" iconType="solid" size="24"/> JavaScript/Node.js (alpha)
35+
36+
* [3\. Integrate with your Backend](/client-sdk-references/node#3-integrate-with-your-backend)
37+
3438
### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
3539

3640
* [3\. Integrate with your Backend](/client-sdk-references/kotlin-multiplatform#3-integrate-with-your-backend)

installation/quickstart-guide.mdx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ title: "Quickstart Guide / Installation Overview"
33
sidebarTitle: "Quickstart / Overview"
44
---
55

6-
PowerSync is designed to be stack agnostic, and currently supports **Postgres**, **MongoDB** and **MySQL** (alpha) as the source database, and has official SDKs for [**Flutter**](/client-sdk-references/flutter) (mobile and [web](/client-sdk-references/flutter/flutter-web-support)), [**React Native**](/client-sdk-references/react-native-and-expo) (mobile and [web](/client-sdk-references/react-native-and-expo/react-native-web-support)), [**JavaScript/Web**](/client-sdk-references/javascript-web) (vanilla JS, React, Vue), [**Kotlin Multiplatform**](/client-sdk-references/kotlin-multiplatform) (beta) and [**Swift**](/client-sdk-references/swift) (beta) available on the client-side today.
6+
PowerSync is designed to be stack agnostic, and currently supports **Postgres**, **MongoDB** and **MySQL** (alpha) as the source database, and has the following official client-side SDKs available today:
7+
- [**Flutter**](/client-sdk-references/flutter) (mobile and [web](/client-sdk-references/flutter/flutter-web-support))
8+
- [**React Native**](/client-sdk-references/react-native-and-expo) (mobile and [web](/client-sdk-references/react-native-and-expo/react-native-web-support))
9+
- [**JavaScript/Web**](/client-sdk-references/javascript-web) (vanilla JS, React, Vue)
10+
- [**JavaScript/Node.js**](/client-sdk-references/node) (alpha)
11+
- [**Kotlin Multiplatform**](/client-sdk-references/kotlin-multiplatform) (beta)
12+
- [**Swift**](/client-sdk-references/swift) (beta)
13+
- [**.NET**](/client-sdk-references/dotnet) (closed alpha)
714

815
<Note>
916
Support for additional platforms is on our [Roadmap](https://roadmap.powersync.com/). If one isn't supported today, please add your vote and check back soon.
@@ -42,7 +49,7 @@ The following outlines our recommended steps to implement PowerSync in your proj
4249
<Step title="Implement PowerSync on the Client-Side">
4350
Implement an app using one of our Client SDKs:
4451
1. To start, you can continue using your Development Token.
45-
2. Implement a "Hello World" app to quickly get a feel, **or** jump straight into installing the client SDK in your existing app — see [Client-Side Setup](/installation/client-side-setup) or follow end-to-end getting started instructions in the [full SDK reference](https://docs.powersync.com/client-sdk-references/introduction).
52+
2. Implement a "Hello World" app to quickly get a feel, **or** jump straight into installing the client SDK in your existing app — see [Client-Side Setup](/installation/client-side-setup) or follow end-to-end getting started instructions in the [full SDK reference](/client-sdk-references/introduction).
4653
3. Verify that downloads from your source database are working. Data should reflect in your UI and you can also [inspect the SQLite database](/resources/troubleshooting#inspect-local-sqlite-database).
4754
</Step>
4855
<Step title="Implement Authentication">

0 commit comments

Comments
 (0)