fixed the packages/start

icehaunter · icehaunter · commit e3e7d5e4e834 · 2025-12-22T19:06:42.000+03:00
diff --git a/.changeset/warm-panthers-thank.md b/.changeset/warm-panthers-thank.md
@@ -0,0 +1,5 @@
+---
+'@electric-sql/start': major
+---
+
+feat: publish the @electric-sql/start package
diff --git a/examples/tanstack-db-web-starter/.tool-versions b/examples/tanstack-db-web-starter/.tool-versions
@@ -1 +1,2 @@
-nodejs 24.11.1
+nodejs 24.11.1
+caddy 2.10.2
diff --git a/examples/tanstack-db-web-starter/drizzle.config.ts b/examples/tanstack-db-web-starter/drizzle.config.ts
@@ -1,4 +1,4 @@
-import "dotenv/config"
+import "@dotenvx/dotenvx/config"
 import { defineConfig } from "drizzle-kit"
 
 export default defineConfig({
diff --git a/examples/tanstack-db-web-starter/package.json b/examples/tanstack-db-web-starter/package.json
@@ -8,15 +8,16 @@
   },
   "scripts": {
     "dev": "pnpm dev:cloud",
-    "dev:cloud": "vite dev",
-    "dev:docker": "docker compose up -d && vite dev",
+    "dev:cloud": "USE_ELECTRIC_URL=true vite dev",
+    "dev:docker": "docker compose up -d && USE_ELECTRIC_URL=false vite dev",
     "backend:up": "docker compose up -d",
     "backend:down": "docker compose down",
     "backend:clear": "docker compose down -v",
     "start": "node .output/server/index.mjs",
     "build": "vite build",
     "migrate": "drizzle-kit migrate",
     "migrate:generate": "drizzle-kit generate",
+    "psql": "dotenvx run -- sh -c 'psql \"$DATABASE_URL\"'",
     "serve": "vite preview",
     "test": "echo 'No tests yet'",
     "lint:check": "eslint .",
@@ -48,6 +49,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
+    "@dotenvx/dotenvx": "^1.51.2",
     "@eslint/compat": "^1.3.1",
     "@eslint/js": "^9.32.0",
     "@tanstack/devtools-vite": "^0.3.11",
@@ -61,12 +63,12 @@
     "@typescript-eslint/parser": "^8.46.0",
     "@vitejs/plugin-react": "^5.0.4",
     "drizzle-kit": "^0.31.4",
-    "dotenv": "^17.2.1",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-react": "^7.37.5",
     "jsdom": "^27.0.0",
+    "open-cli": "^8.0.0",
     "prettier": "^3.6.2",
     "tsx": "^4.20.3",
     "typescript": "^5.7.2",
diff --git a/examples/tanstack-db-web-starter/src/db/connection.ts b/examples/tanstack-db-web-starter/src/db/connection.ts
@@ -1,4 +1,4 @@
-import "dotenv/config"
+import "@dotenvx/dotenvx/config"
 import { drizzle } from "drizzle-orm/node-postgres"
 
 export const db = drizzle(process.env.DATABASE_URL!, { casing: `snake_case` })
diff --git a/examples/tanstack-db-web-starter/src/lib/electric-proxy.ts b/examples/tanstack-db-web-starter/src/lib/electric-proxy.ts
@@ -1,16 +1,17 @@
-import "dotenv/config"
+import "@dotenvx/dotenvx/config"
 import { ELECTRIC_PROTOCOL_QUERY_PARAMS } from "@electric-sql/client"
 
 /**
- * Gets the Electric SQL endpoint URL based on environment configuration
- * Priority: ELECTRIC_URL env var > production default > local docker default
+ * Gets the Electric SQL endpoint URL based on environment configuration.
+ *
+ * If running in production, or `USE_ELECTRIC_URL` is set to `true`, the `ELECTRIC_URL` env var is used,
+ * if available, otherwise the default cloud endpoint is used.
+ * Otherwise, the local docker endpoint is used, assuming default port 30000.
  */
 function getElectricUrl(): string {
-  if (process.env.ELECTRIC_URL) {
-    return process.env.ELECTRIC_URL
-  }
-  return process.env.NODE_ENV === `production`
-    ? `https://api.electric-sql.cloud`
+  return process.env.NODE_ENV === `production` ||
+    process.env.USE_ELECTRIC_URL === `true`
+    ? process.env.ELECTRIC_URL || `https://api.electric-sql.cloud`
     : `http://localhost:30000`
 }
 
diff --git a/examples/tanstack-db-web-starter/src/vite-plugin-caddy.ts b/examples/tanstack-db-web-starter/src/vite-plugin-caddy.ts
@@ -1,4 +1,4 @@
-import { spawn, type ChildProcess } from "child_process"
+import { spawn, spawnSync, type ChildProcess } from "child_process"
 import { writeFileSync } from "fs"
 import { readFileSync } from "fs"
 import { networkInterfaces } from "os"
@@ -124,9 +124,28 @@ ${networkIP} {
   const startCaddyIfReady = (projectName: string) => {
     if (autoStart && vitePort && !caddyStarted) {
       caddyStarted = true
+
+      // Check if `caddy` binary is available before starting (sync)
+      try {
+        const check = spawnSync(`caddy`, [`--version`], { stdio: `ignore` })
+        if (check.error || check.status !== 0) {
+          throw new Error(
+            `\`caddy\` binary not found or is not working. Please ensure Caddy is installed and available in your PATH.`
+          )
+        }
+      } catch (_err) {
+        console.error(
+          `\`caddy\` binary not found or is not working. Please ensure Caddy is installed and available in your PATH.`,
+          `\nCaddy is required to be able to serve local development with HTTP2 support.`,
+          `\n  - Install Caddy: https://caddyserver.com/docs/install`,
+          `\n  - If you have \`asdf\`, run \`asdf install\``
+        )
+        process.exit(1)
+      }
       // Generate Caddyfile
       const caddyConfig = generateCaddyfile(projectName, vitePort)
       writeFileSync(configPath, caddyConfig)
+
       // Start Caddy
       startCaddy(configPath)
     }
@@ -172,8 +191,10 @@ ${networkIP} {
         console.log()
         console.log(`  ➜  Local:   https://${projectName}.localhost/`)
         console.log(`  ➜  Network: https://${networkIP}/`)
-        console.log(`  ➜  press h + enter to show help`)
         console.log()
+        console.log(
+          `  Note: running through Caddy. You might be prompted for password to install HTTPS certificates for local development.`
+        )
       }
 
       server.middlewares.use((_req, _res, next) => {
@@ -185,12 +206,12 @@ ${networkIP} {
       })
 
       const originalListen = server.listen
-      server.listen = function (port?: number, ...args: unknown[]) {
+      server.listen = function (port?: number, isRestart?: boolean) {
         if (port) {
           vitePort = port
         }
 
-        const result = originalListen.call(this, port, ...args)
+        const result = originalListen.call(this, port, isRestart)
 
         // Try to start Caddy after server is listening
         if (result && typeof result.then === `function`) {
diff --git a/examples/tanstack-db-web-starter/vite.config.ts b/examples/tanstack-db-web-starter/vite.config.ts
@@ -16,11 +16,7 @@ const config = defineConfig({
     }),
     caddyPlugin(),
     tailwindcss(),
-    tanstackStart({
-      router: {
-        srcDirectory: `src`,
-      },
-    }),
+    tanstackStart(),
     viteReact(),
   ],
   optimizeDeps: {
diff --git a/packages/start/.eslintrc.cjs b/packages/start/.eslintrc.cjs
@@ -32,10 +32,10 @@ module.exports = {
     ],
   },
   ignorePatterns: [
-    '**/node_modules/**',
-    '**/dist/**',
-    'tsup.config.ts',
-    'vitest.config.ts',
-    '.eslintrc.js',
+    `**/node_modules/**`,
+    `**/dist/**`,
+    `tsup.config.ts`,
+    `vitest.config.ts`,
+    `.eslintrc.js`,
   ],
-}
+}
diff --git a/packages/start/.prettierrc b/packages/start/.prettierrc
@@ -3,4 +3,4 @@
   "semi": false,
   "tabWidth": 2,
   "singleQuote": true
-}
+}
diff --git a/packages/start/package.json b/packages/start/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/start",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "description": "CLI package for the ElectricSQL Quickstart.",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/start/src/cli.ts b/packages/start/src/cli.ts
@@ -26,7 +26,6 @@ async function main() {
   console.log(`Creating app: ${appName}`)
 
   try {
-    console.log(`Provisioning resources...`)
     const credentials = await provisionElectricResources()
 
     // Step 2: Setup TanStack Start template
@@ -39,13 +38,13 @@ async function main() {
     console.log(`Next steps:`)
     console.log(`  cd ${appName}`)
     console.log(`  pnpm install`)
-    console.log(`  pnpm migrate`)
-    console.log(`  pnpm dev`)
+    console.log(`  pnpm run migrate`)
+    console.log(`  pnpm run dev`)
     console.log(``)
     console.log(`Commands:`)
-    console.log(`  pnpm psql     # Connect to database`)
-    console.log(`  pnpm claim    # Claim cloud resources`)
-    console.log(`  pnpm deploy   # Deploy to Netlify`)
+    console.log(`  pnpm run psql     # Connect to database`)
+    console.log(`  pnpm run claim    # Claim cloud resources`)
+    console.log(`  pnpm run deploy   # Deploy to Netlify`)
     console.log(``)
     console.log(`Tutorial: https://electric-sql.com/docs`)
   } catch (error) {
diff --git a/packages/start/src/electric-api.ts b/packages/start/src/electric-api.ts
@@ -6,7 +6,7 @@ export interface ElectricCredentials {
   DATABASE_URL: string
 }
 
-interface ClaimableSourceResponse {
+export interface ClaimableSourceResponse {
   claimId: string
 }
 
@@ -22,8 +22,9 @@ interface ClaimableSourceStatus {
   error: string | null
 }
 
-export const DEFAULT_ELECTRIC_API_BASE = `https://api.electric-sql.cloud`
+export const DEFAULT_ELECTRIC_API_BASE = `https://dashboard.electric-sql.cloud/api`
 export const DEFAULT_ELECTRIC_URL = `https://api.electric-sql.cloud`
+export const DEFAULT_ELECTRIC_DASHBOARD_URL = `https://dashboard.electric-sql.cloud`
 
 export function getElectricApiBase(): string {
   return process.env.ELECTRIC_API_BASE_URL ?? DEFAULT_ELECTRIC_API_BASE
@@ -33,6 +34,10 @@ export function getElectricUrl(): string {
   return process.env.ELECTRIC_URL ?? DEFAULT_ELECTRIC_URL
 }
 
+export function getElectricDashboardUrl(): string {
+  return process.env.ELECTRIC_DASHBOARD_URL ?? DEFAULT_ELECTRIC_DASHBOARD_URL
+}
+
 const POLL_INTERVAL_MS = 1000 // Poll every 1 second
 const MAX_POLL_ATTEMPTS = 60 // Max 60 seconds
 
@@ -85,7 +90,10 @@ async function pollClaimableSource(
   )
 }
 
-export async function provisionElectricResources(): Promise<ElectricCredentials> {
+export async function provisionElectricResources(): Promise<
+  ElectricCredentials & ClaimableSourceResponse
+> {
+  console.log(`Provisioning resources...`)
   try {
     // Step 1: POST to create claimable source and get claimId
     const response = await fetch(
@@ -130,6 +138,7 @@ export async function provisionElectricResources(): Promise<ElectricCredentials>
       source_id: status.source.source_id,
       secret: status.source.secret,
       DATABASE_URL: status.connection_uri,
+      claimId,
     }
   } catch (error) {
     if (error instanceof Error) {
diff --git a/packages/start/src/template-setup.ts b/packages/start/src/template-setup.ts
diff --git a/packages/start/test/cli.test.ts b/packages/start/test/cli.test.ts
diff --git a/packages/start/test/electric-api.test.ts b/packages/start/test/electric-api.test.ts
diff --git a/packages/start/test/template-setup.test.ts b/packages/start/test/template-setup.test.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/comment-on-release.mjs b/scripts/comment-on-release.mjs

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@electric-sql/start': major
 +---
++
 +feat: publish the @electric-sql/start package
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-nodejs 24.11.1`
	`1`	`+nodejs 24.11.1`
	`2`	`+caddy 2.10.2`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import "dotenv/config"`
	`1`	`+import "@dotenvx/dotenvx/config"`
`2`	`2`	`import { defineConfig } from "drizzle-kit"`
`3`	`3`
`4`	`4`	`export default defineConfig({`