{"id":24157680,"url":"https://github.com/rocicorp/hello-zero","last_synced_at":"2025-09-20T01:32:39.683Z","repository":{"id":268810433,"uuid":"871088573","full_name":"rocicorp/hello-zero","owner":"rocicorp","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-19T03:14:04.000Z","size":58,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-19T04:21:18.037Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rocicorp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-11T08:47:03.000Z","updated_at":"2024-12-19T03:14:08.000Z","dependencies_parsed_at":"2024-12-19T04:32:18.029Z","dependency_job_id":null,"html_url":"https://github.com/rocicorp/hello-zero","commit_stats":null,"previous_names":["rocicorp/hello-zero"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocicorp%2Fhello-zero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocicorp%2Fhello-zero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocicorp%2Fhello-zero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocicorp%2Fhello-zero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rocicorp","download_url":"https://codeload.github.com/rocicorp/hello-zero/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233612439,"owners_count":18702590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-12T14:02:41.305Z","updated_at":"2025-09-20T01:32:39.653Z","avatar_url":"https://github.com/rocicorp.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Hello Zero\n\n## Option 1: Run this repo\n\nFirst, install dependencies:\n\n```sh\nnpm i\n```\n\nNext, run docker:\n\n```sh\nnpm run dev:db-up\n```\n\n**In a second terminal**, run the zero cache server:\n\n```sh\nnpm run dev:zero-cache\n```\n\n**In a third terminal**, run the Vite dev server:\n\n```sh\nnpm run dev:ui\n```\n\n## Option 2: Install Zero in your own project\n\nThis guide explains how to set up Zero in your React application, using this\nrepository as a reference implementation.\n\n### Prerequisites\n\n**1. PostgreSQL database with Write-Ahead Logging (WAL) enabled**\n\nSee [Connecting to Postgres](https://zero.rocicorp.dev/docs/connecting-to-postgres)\n\n**2. Environment Variables**\n\nSet the following environment variables. `ZSTART_UPSTREAM_DB` is the URL to your Postgres\ndatabase.\n\n```ini\n# Your application's data\nZERO_UPSTREAM_DB=\"postgresql://user:password@127.0.0.1/mydb\"\n\n# Secret to decode auth token.\nZERO_AUTH_SECRET=\"secretkey\"\n\n# Place to store sqlite replica file.\nZERO_REPLICA_FILE=\"/tmp/zstart_replica.db\"\n\n# Where UI will connect to zero-cache.\nVITE_PUBLIC_SERVER=http://localhost:4848\n```\n\n### Setup\n\n1. **Install Zero**\n\n```bash\nnpm install @rocicorp/zero\n```\n\n2. **Create Schema** Define your database schema using Zero's schema builder.\n   See [schema.ts](src/schema.ts) for example:\n\n```typescript\nimport { createSchema, table, string } from \"@rocicorp/zero\";\n\nconst user = table(\"user\")\n  .columns({\n    id: string(),\n    name: string(),\n  })\n  .primaryKey(\"id\");\n\nexport const schema = createSchema({\n  tables: [user],\n});\n\nexport type Schema = typeof schema;\n```\n\n3. **Initialize Zero Client-Side** Set up the Zero provider in your app entry\n   point. See [main.tsx](src/main.tsx):\n\n```tsx\nimport { Zero } from \"@rocicorp/zero\";\nimport { ZeroProvider } from \"@rocicorp/zero/react\";\nimport { schema } from \"./schema\";\n\n// In a real app, you might initialize this inside of useMemo\n// and use a real auth token\nconst z = new Zero({\n  userID: \"your-user-id\",\n  auth: \"your-auth-token\",\n  server: import.meta.env.VITE_PUBLIC_SERVER,\n  schema,\n});\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003cZeroProvider zero={z}\u003e\n    \u003cApp /\u003e\n  \u003c/ZeroProvider\u003e\n);\n```\n\n4. **Using Zero in Components** Example usage in React components. See\n   [App.tsx](src/App.tsx):\n\n```typescript\nimport { useQuery, useZero } from \"@rocicorp/zero/react\";\nimport { Schema } from \"./schema\";\n\n// You may want to put this in its own file\nconst useZ = useZero\u003cSchema\u003e;\n\nexport function UsersPage() {\n  const z = useZ();\n  const users = useQuery(z.query.user);\n\n  if (!users) {\n    return null;\n  }\n\n  // Use the data...\n  return (\n    \u003cdiv\u003e\n      {users.map((user) =\u003e (\n        \u003cdiv key={user.id}\u003e{user.name}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\nFor more examples of queries, mutations, and relationships, explore the\n[App.tsx](src/App.tsx) file in this repository.\n\n### Optional: Authentication\n\nThis example includes JWT-based authentication. See [api/index.ts](api/index.ts)\nfor an example implementation using Hono.\n\n### Development\n\n**1. Start the PostgreSQL database:**\n\nIf you are using Docker (referencing the example in\n[docker](docker/docker-compose.yml)), run:\n\n```bash\nnpm run dev:db-up\n```\n\n**2. Start the zero cache server (in a separate terminal):**\n\n```bash\nnpx zero-cache\n```\n\n**3. Start your React dev server**\n\n```bash\nnpm run dev # this depends on your react app setup\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocicorp%2Fhello-zero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frocicorp%2Fhello-zero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocicorp%2Fhello-zero/lists"}