Skip to content

Quickstart remix#4113

Open
bradleyshep wants to merge 3 commits intomasterfrom
quickstart-remix
Open

Quickstart remix#4113
bradleyshep wants to merge 3 commits intomasterfrom
quickstart-remix

Conversation

@bradleyshep
Copy link
Contributor

@bradleyshep bradleyshep commented Jan 23, 2026

Description of Changes

Adds a Remix quickstart template and documentation for SpacetimeDB.

Template (templates/remix-ts/)

  • SpacetimeDB module with TypeScript (spacetimedb/src/index.ts)
  • Remix app with Vite configuration
  • SpacetimeDB provider in app/providers.tsx with proper SSR/hydration handling
  • Example route (app/routes/_index.tsx) demonstrating useTable and useReducer hooks
  • Pre-generated module bindings in src/module_bindings/

Documentation (docs/docs/00100-intro/00200-quickstarts/00175-remix.md)

  • Step-by-step quickstart guide following existing pattern
  • Covers project creation with spacetime dev --template remix-ts
  • Explains project structure, provider pattern, and React hooks usage
  • Documents environment variable configuration (VITE_SPACETIMEDB_HOST, VITE_SPACETIMEDB_DB_NAME)

Consistency

  • Environment variables follow the same HOST/DB_NAME naming convention as other quickstarts
  • Documentation structure mirrors Next.js and React quickstarts
  • Dev server runs on port 3001 to avoid conflict with SpacetimeDB on port 3000

API and ABI breaking changes

None.

Expected complexity level and risk

1 - Additive change only. New template and documentation, no modifications to existing functionality.

Testing

  • Run spacetime dev --template remix-ts my-remix-app and verify app starts
  • Verify SpacetimeDB connection works at http://localhost:3001
  • Test adding a person via the UI form
  • Verify SSR doesn't crash (SpacetimeDB provider defers to client-side)
  • Check documentation renders correctly in Docusaurus

Copy link
Contributor

@cloutiertyler cloutiertyler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to explore accessing SpacetimeDB state in loaders before approving this. We at the very least need to change the comment, because I don't think it's true (indeed spacetimedb.com uses the TS SDK on the backend).

@bradleyshep
Copy link
Contributor Author

I would like to explore accessing SpacetimeDB state in loaders before approving this. We at the very least need to change the comment, because I don't think it's true (indeed spacetimedb.com uses the TS SDK on the backend).

Updates:

  • Changed default port from 3001 to 5173 (Vite default) - removed from both package.json and vite.config.ts
  • Changed default host from ws://localhost:3000 to wss://maincloud.spacetimedb.com
  • Merged providers.tsx into root.tsx for simplicity
  • Added app/lib/spacetimedb.server.ts for server-side data fetching
  • Added Remix loader to _index.tsx for SSR data fetching
  • Updated quickstart docs to explain SSR pattern and fix incorrect "client-side only" claim

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants