Skip to content

Commit

Permalink
docs: tweaks to deployment / integration docs. (#1944)
Browse files Browse the repository at this point in the history
  • Loading branch information
thruflo authored Nov 6, 2024
1 parent a019025 commit ffce67f
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 9 deletions.
2 changes: 1 addition & 1 deletion examples/nextjs-example/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Basic Remix example
# Basic Next.js example

## Setup

Expand Down
3 changes: 2 additions & 1 deletion website/docs/integrations/crunchy.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ CREATE ROLE electric WITH REPLICATION LOGIN PASSWORD '...';
GRANT ALL PRIVILEGES ON DATABASE "postgres" to electric;
```

You can then connect
You can then connect as the new `electric` user.

> [!Tip] Need somewhere to host Electric?
> If you need somewhere to deploy Electric then [Crunchy works well](https://neon.tech/docs/guides/render) with [Render](./render#deploy-electric).
8 changes: 5 additions & 3 deletions website/docs/integrations/fly.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,22 @@ image: /img/integrations/electric-fly.jpg

## Electric and Fly

You *can* use Fly to deploy any or all components of the Electric stack:
You can use Fly to deploy any or all components of the Electric stack:

- [deploy a Postgres database](#deploy-postgres)
- [an Electric sync service](#deploy-electric)
- [your client application](#deploy-your-app)

Fly's sweet spot is deploying Elixir applications, like the Electric sync service and/or [Phoenix aplications](./phoenix).
One of Fly's specialities is deploying Elixir applications. So Fly is especially good for [deploying the Electric sync service](#deploy-electric) and/or [Phoenix applications](./phoenix) using Electric.

> [!Tip] Need context?
> See the [Deployment guide](/docs/guides/deployment) for more details.
### Deploy Postgres

Fly isn't really a managed Postgres host. They do offer [database hosting](https://fly.io/docs/database-storage-guides/#managed-database-services) but they prefer to offload it to other providers, such as [Supabase](./supabase).
[Fly Postgres](https://fly.io/docs/postgres) is not a managed Postgres service. See the general advice on [Running Postgres](/docs/guides/deployment#_1-running-postgres) in the deployment guide for information on how to configure Postgres to work with Electric.

Fly's [Supabase Postgres](https://fly.io/docs/supabase) is a managed Postgres service, powered by [Supabase](./supabase). If you use it, make sure to connect on the IPv6 `DATABASE_URL` rather than the `DATABASE_POOLER_URL` and see the [Supabase guide](./supabase#deploy-postgres) for more context.

### Deploy Electric

Expand Down
22 changes: 18 additions & 4 deletions website/docs/integrations/next.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,27 @@ image: /img/integrations/electric-next.jpg

Next.js is based on React. Electric [works with React](./react). You can integrate Electric into your Next.js application like any other npm / React library.

### SSR
### Examples

Next.js supports SSR. We are currently [experimenting with patterns](https://github.com/electric-sql/electric/pull/1596) to use Electric with SSR in a way that supports server rendering *and* client-side components seamlessly moving into realtime sync.
#### Next.js example

### Examples
See the [nextjs-example](https://github.com/electric-sql/electric/tree/main/examples/nextjs-example) on GitHub. This demonstrates using Electric for read-path sync and a Next.js API for handling writes:

<<< @../../examples/nextjs-example/app/page.tsx

It also demonstrates using a [shape-proxy endpoint](https://github.com/electric-sql/electric/blob/main/examples/nextjs-example/app/shape-proxy/route.ts) for proxying access to the Electric sync service. This allows you to implement [auth](/docs/guides/auth) and routing in-front-of Electric (and other concerns like transforming or decrypting the stream) using your Next.js backend:

<<< @../../examples/nextjs-example/app/shape-proxy/route.ts

[ElectroDrizzle](https://github.com/LeonAlvarez/ElectroDrizzle) is an example Next.js application using ElectricSQL and PGLite.
#### ElectroDrizzle

[ElectroDrizzle](https://github.com/LeonAlvarez/ElectroDrizzle) is an example application by [Leon Alvarez](https://github.com/LeonAlvarez) using Next.js, [Drizzle](https://orm.drizzle.team), [PGLite](/product/pglite) and Electric together.

See the [Getting Started guide here](https://github.com/LeonAlvarez/ElectroDrizzle?tab=readme-ov-file#getting-started).

#### SSR

Next.js supports SSR. We are currently [experimenting with patterns](https://github.com/electric-sql/electric/pull/1596) to use Electric with SSR in a way that supports server rendering *and* client-side components seamlessly moving into realtime sync.

<HelpWanted issue="1596">
<template v-slot:thing>
Expand Down

0 comments on commit ffce67f

Please sign in to comment.