Skip to content
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.

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

docs: tweaks to deployment / integration docs. #1944

Merged
merged 3 commits into from
Nov 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
Loading