examples: add public deployment of LinearLite

.github/workflows/deploy_examples.yml

@@ -0,0 +1,57 @@
+name: Deploy Examples
+
+on:
+    push:
+      branches: ['main']
+    pull_request:
+      paths: ['examples/*/**']
+
+concurrency:
+  group: ${{ github.event_name == 'push' && 'prod-deploy-group' || format('examples-pr-{0}', github.event.number) }}
+
+jobs:
+  deploy-examples:
+    name: Deploy Examples
+    environment: ${{ github.event_name == 'push' && 'Production' || 'Pull request' }}
+    runs-on: ubuntu-latest
+
+    env:
+      DEPLOY_ENV: ${{ github.event_name == 'push' && 'production' || format('pr-{0}', github.event.number) }}
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      CLOUDFLARE_DEFAULT_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_DEFAULT_ACCOUNT_ID }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      NEON_API_KEY: ${{ secrets.NEON_API_KEY }}
+      NEON_PROJECT_ID: ${{ secrets.NEON_PROJECT_ID }}
+      ELECTRIC_API: ${{ secrets.ELECTRIC_API }}
+      ELECTRIC_ADMIN_API: ${{ secrets.ELECTRIC_ADMIN_API }}
+      # HONEYCOMB_API_KEY: ${{ secrets.HONEYCOMB_API_KEY }} TODO
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Cache SST state
+        uses: actions/cache@v4
+        with:
+          path: .sst
+          key: sst-cache-main-${{ runner.os }}
+          restore-keys: |
+            sst-cache-main-${{ runner.os }}
+
+      - name: Deploy Linearlite
+        working-directory: examples/linearlite
+        run: pnpm sst deploy --stage ${{ env.DEPLOY_ENV }}
+
+      - name: Deploy NextJs example
+        working-directory: examples/nextjs-example
+        run: pnpm sst deploy --stage ${{ env.DEPLOY_ENV }}

.github/workflows/teardown_examples_pr_stack.yml

@@ -0,0 +1,62 @@
+name: Teardown Examples PR stack
+
+on:
+  pull_request:
+    paths: ['examples/*/**']
+    types: [closed]
+
+concurrency:
+  group: examples-pr-${{ github.event.number }}
+
+jobs:
+  teardown-pr-stack:
+    name: Teardown Examples PR stack
+    environment: Pull request
+    runs-on: ubuntu-latest
+
+    env:
+      DEPLOY_ENV: ${{ github.event_name == 'push' && 'production' || format('pr-{0}', github.event.number) }}
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      CLOUDFLARE_DEFAULT_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_DEFAULT_ACCOUNT_ID }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      NEON_API_KEY: ${{ secrets.NEON_API_KEY }}
+      NEON_PROJECT_ID: ${{ secrets.NEON_PROJECT_ID }}
+      ELECTRIC_API: ${{ secrets.ELECTRIC_API }}
+      ELECTRIC_ADMIN_API: ${{ secrets.ELECTRIC_ADMIN_API }}
+      # HONEYCOMB_API_KEY: ${{ secrets.HONEYCOMB_API_KEY }} TODO
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Cache SST state
+        uses: actions/cache@v4
+        with:
+          path: .sst
+          key: sst-cache-${{ github.event.number }}-${{ runner.os }}
+          restore-keys: |
+            sst-cache-${{ runner.os }}
+
+      - name: Remove Linearlite
+        working-directory: examples/linearlite
+        run: |
+            export PR_NUMBER=${{ github.event.number }}
+            echo "Removing stage pr-$PR_NUMBER"
+            pnpm sst remove --stage "pr-$PR_NUMBER"
+
+      - name: Remove NextJs example
+        working-directory: examples/nextjs-example
+        run: |
+            export PR_NUMBER=${{ github.event.number }}
+            echo "Removing stage pr-$PR_NUMBER"
+            pnpm sst remove --stage "pr-$PR_NUMBER"

examples/linearlite/.gitignore

@@ -1,3 +1,4 @@
 dist
 .env.local
-db/data/
+db/data/
+.sst/

examples/linearlite/package.json

@@ -5,18 +5,19 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "backend:up": "PROJECT_NAME=linearlite pnpm -C ../../ run example-backend:up && pnpm db:migrate && pnpm db:load-data",
     "backend:down": "PROJECT_NAME=linearlite pnpm -C ../../ run example-backend:down",
-    "db:migrate": "dotenv -e ../../.env.dev -- pnpm exec pg-migrations apply --directory ./db/migrations",
+    "backend:up": "PROJECT_NAME=linearlite pnpm -C ../../ run example-backend:up && pnpm db:migrate && pnpm db:load-data",
+    "build": "vite build",
     "db:load-data": "dotenv -e ../../.env.dev -- node ./db/load_data.js",
+    "db:migrate": "dotenv -e ../../.env.dev -- pnpm exec pg-migrations apply --directory ./db/migrations",
     "dev": "vite",
-    "build": "vite build",
-    "stylecheck": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
-    "process-data": "node ./db/process_data.js"
+    "process-data": "node ./db/process_data.js",
+    "stylecheck": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@electric-sql/client": "workspace:*",
     "@electric-sql/react": "workspace:*",
     "@firefox-devtools/react-contextmenu": "^5.1.1",
     "@headlessui/react": "^1.7.17",
@@ -35,7 +36,6 @@
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.5",
-    "@electric-sql/client": "workspace:*",
     "fractional-indexing": "^3.2.0",
     "jsonwebtoken": "^9.0.2",
     "lodash.debounce": "^4.0.8",
@@ -79,6 +79,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "fs-extra": "^10.0.0",
     "postcss": "^8.4.39",
+    "sst": "3.3.7",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
     "vite": "^4.4.5"

examples/linearlite/src/electric.tsx

@@ -1 +1,5 @@
-export const baseUrl = import.meta.env.ELECTRIC_URL ?? `http://localhost:3000`
+export const baseUrl = import.meta.env.VITE_ELECTRIC_URL
+  ? new URL(import.meta.env.VITE_ELECTRIC_URL).origin
+  : `http://localhost:3000`
+export const token = import.meta.env.VITE_ELECTRIC_TOKEN ?? ``
+export const databaseId = import.meta.env.VITE_DATABASE_ID ?? ``

examples/linearlite/src/pages/Issue/Comments.tsx

@@ -8,7 +8,7 @@ import { formatDate } from '../../utils/date'
 import { showWarning } from '../../utils/notification'
 import { Comment, Issue } from '../../types/types'
 import { useShape } from '@electric-sql/react'
-import { baseUrl } from '../../electric'
+import { baseUrl, databaseId, token } from '../../electric'
 
 export interface CommentsProps {
   issue: Issue
@@ -19,6 +19,10 @@ function Comments(commentProps: CommentsProps) {
   const allComments = useShape({
     url: `${baseUrl}/v1/shape`,
     table: `comment`,
+    databaseId,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   })! as Comment[]
 
   const comments = allComments.data.filter(

examples/linearlite/src/shapes.ts

@@ -1,6 +1,11 @@
-import { baseUrl } from './electric'
+import { ShapeStreamOptions } from '@electric-sql/client'
+import { baseUrl, databaseId, token } from './electric'
 
-export const issueShape = {
-  url: `${baseUrl}/v1/shape`,
+export const issueShape: ShapeStreamOptions = {
+  url: `${baseUrl}/v1/shape/`,
   table: `issue`,
+  databaseId,
+  headers: {
+    Authorization: `Bearer ${token}`,
+  },
 }

examples/linearlite/src/sst-env.d.ts

@@ -0,0 +1,12 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_ELECTRIC_URL: string
+  readonly VITE_ELECTRIC_TOKEN: string
+  readonly VITE_DATABASE_ID: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

examples/linearlite/sst-env.d.ts

@@ -0,0 +1,10 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/* deno-fmt-ignore-file */
+import "sst"
+export {}
+declare module "sst" {
+  export interface Resource {
+  }
+}

examples/linearlite/sst.config.ts

@@ -0,0 +1,117 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./.sst/platform/config.d.ts" />
+
+import { execSync } from 'child_process'
+
+export default $config({
+  app(input) {
+    return {
+      name: `linearlite`,
+      removal: input?.stage === `production` ? `retain` : `remove`,
+      home: `aws`,
+      providers: {
+        cloudflare: `5.42.0`,
+        aws: {
+          version: `6.57.0`,
+        },
+        neon: `0.6.3`,
+      },
+    }
+  },
+  async run() {
+    const project = neon.getProjectOutput({ id: process.env.NEON_PROJECT_ID! })
+    const base = {
+      projectId: project.id,
+      branchId: project.defaultBranchId,
+    }
+
+    const db = new neon.Database(`linearlite`, {
+      ...base,
+      ownerName: `neondb_owner`,
+    })
+
+    const databaseUri = getNeonDbUri(project, db)
+    try {
+      databaseUri.apply(applyMigrations)
+
+      const electricInfo = databaseUri.apply((uri) =>
+        addDatabaseToElectric(uri)
+      )
+
+      const website = deployLinearLite(electricInfo)
+      return {
+        databaseUri,
+        database_id: electricInfo.id,
+        electric_token: electricInfo.token,
+        website: website.url,
+      }
+    } catch (e) {
+      console.error('Failed to deploy linearlite stack', e)
+    }
+  }
+})
+
+function applyMigrations(uri: string) {
+  execSync(`pnpm exec pg-migrations apply --directory ./db/migrations`, {
+    env: {
+      ...process.env,
+      DATABASE_URL: uri,
+    },
+  })
+}
+
+function deployLinearLite(
+  electricInfo: $util.Output<{ id: string; token: string }>
+) {
+  return new sst.aws.StaticSite(`linearlite`, {
+    environment: {
+      VITE_ELECTRIC_URL: process.env.ELECTRIC_API!,
+      VITE_ELECTRIC_TOKEN: electricInfo.token,
+      VITE_DATABASE_ID: electricInfo.id,
+    },
+    build: {
+      command: `pnpm run --filter @electric-sql/client  --filter @electric-sql/react --filter @electric-examples/linearlite build`,
+      output: `dist`,
+    },
+    domain: {
+      name: `linearlite${$app.stage === `production` ? `` : `-stage-${$app.stage}`}.electric-sql.com`,
+      dns: sst.cloudflare.dns(),
+    },
+  })
+}
+
+function getNeonDbUri(
+  project: $util.Output<neon.GetProjectResult>,
+  db: neon.Database
+) {
+  const passwordOutput = neon.getBranchRolePasswordOutput({
+    projectId: project.id,
+    branchId: project.defaultBranchId,
+    roleName: db.ownerName,
+  })
+
+  return $interpolate`postgresql://${passwordOutput.roleName}:${passwordOutput.password}@${project.databaseHost}/${db.name}?sslmode=require`
+}
+
+async function addDatabaseToElectric(
+  uri: string
+): Promise<{ id: string; token: string }> {
+  const adminApi = process.env.ELECTRIC_ADMIN_API
+
+  const result = await fetch(`${adminApi}/v1/databases`, {
+    method: `PUT`,
+    headers: { 'Content-Type': `application/json` },
+    body: JSON.stringify({
+      database_url: uri,
+      region: `us-east-1`,
+    }),
+  })
+
+  if (!result.ok) {
+    throw new Error(
+      `Could not add database to Electric (${result.status}): ${await result.text()}`
+    )
+  }
+
+  return await result.json()
+}

examples/nextjs-example/app/db.ts

@@ -2,11 +2,7 @@ import pgPkg from "pg"
 const { Client } = pgPkg
 
 const db = new Client({
-  host: `localhost`,
-  port: 54321,
-  password: `password`,
-  user: `postgres`,
-  database: `electric`,
+  connectionString: process.env.DATABASE_URL,
 })
 
 db.connect()