Skip to content

Commit

Permalink
fixup! Add quickstart to nav bar in LiveSync
Browse files Browse the repository at this point in the history
  • Loading branch information
GregHolmes committed Jun 10, 2024
1 parent 5ff8833 commit 86e30f1
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions content/livesync/quickstart.textile
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ h3(#step-2). Set up a database

In general, LiveSync works with your own Postgres database, but for the purposes of the quickstart, this step will take you through setting up an example database with "Neon":https://neon.tech which is a serverless platform for Postgres databases.

In Neon, create a new database, and make a note of the @Connection string@ in the Neon dashboard. This is the database URL your project's backend will connect to, as well as the Database Connector.

h3(#step-3). Add the database credentials to env file

Set up environment variables by copying them from the template:
Expand All @@ -49,9 +51,9 @@ export $(grep -s -v "^#" env.local | xargs)

h3(#step-4). Configure the Postgres Integration on Ably Dashboard

The Database Connector watches changes in your database table using the transactional "outbox pattern":https://docs.aws.amazon.com/prescriptive-guidance/latest/cloud-design-patterns/transactional-outbox.html and broadcasts those updates over Ably Channels. There are two ways to host the Database Connector, you can use, either the "Ably hosted":/livesync/database-connector#hosted-with-ably or "self hosted":/livesync/database-connector#self-hosted, for this quickstart we'll use the Ably hosted Database Connector. In the "Ably dashboard":https://ably.com/dashboard, choose the project you wish to use for this quickstart and open the @Integrations@ tab. Update the following options available to you:
The Database Connector watches changes in your database table using the transactional "outbox pattern":https://docs.aws.amazon.com/prescriptive-guidance/latest/cloud-design-patterns/transactional-outbox.html and broadcasts those updates over Ably Channels. There are two ways to host the Database Connector. You can use either the Database Connector "hosted with Ably":/livesync/database-connector#hosted-with-ably or the same Database Connector but "hosted by yourself":/livesync/database-connector#self-hosted. For this quickstart we'll use the Ably hosted Database Connector. In the "Ably dashboard":https://ably.com/dashboard, choose the project you wish to use for this quickstart and open the @Integrations@ tab. Update the following options available to you:

|_. Option |_. Description |_. Example |
|_. Option |_. What to add |_. Example |
| URL | Your Neon Postgres database full URL | postgresql://pguser:pgpass@pghost/pgdb?sslmode=require |
| Outbox table schema | Schema for the "outbox table":/livesync/outbox-nodes-tables#schema. Use "public" for this quickstart. | public |
| Outbox table name | Name for the "outbox table":/livesync/outbox-nodes-tables#outbox-table. In this quickstart it is "outbox" | outbox |
Expand Down Expand Up @@ -82,7 +84,7 @@ h3(#step-7). Try it out!

Open the app "localhost:3000":http://localhost:3000 in at least two browser tabs.

Navigate to a post in both tabs, then in one of the tabs try adding, editing, and removing comments from multiple tabs and see the changes reflected to all users in realtime!
Navigate to a post in both tabs, then in one of the tabs try adding, editing, and removing comments, each update will be optimistically updated immediately for the tab making the change. Once the change is confirmed from the backend, all other tabs will be updated in realtime.

h2(#breakdown). Understanding the implementation

Expand All @@ -100,7 +102,7 @@ Before breaking down LiveSync components within the example, the main files with
- @prisma/migrations/@ - Creating the @nodes@, @outbox@, @user@, @post@, and @comment@ tables.
- @prisma/seed.ts@ - Populates the database tables with seeded data for testing with.

h3(#model). The model
h3(#model). The frontend model

The @model@ is a data model representation of a specific part of your frontend application. In the @livecomments@ example, the "model":https://github.com/ably-labs/live-comments/blob/main/lib/models/hook.ts#L40-L46 is a specific post, defined by its unique post ID, @post:${id}@.

Expand Down

0 comments on commit 86e30f1

Please sign in to comment.