LiveStore Workshop 2025

A modern monorepo project featuring a web application, mobile Expo app, and sync server for real-time data synchronization.

Refer to the /lessons directory for step-by-step workshop instructions and exercises.

Project Structure

This project is organized as a monorepo using npm workspaces with the following packages:

• packages/web: Web application
• packages/mobile: Mobile application
• packages/sync-backend: Backend service for data synchronization
• packages/shared: Abstracted elements to share across packages, mostly types and LiveStore schema and queries

Prerequisites

• Node.js (Latest LTS version recommended)
• pnpm - Used as package manager and runtime
• Set up your environment - Needed to run simulators/emulators in your computer

Getting Started

1. Clone the repository:

   git clone https://github.com/betomoedano/livestore-workshop-app
   cd livestore-workshop-app

2. Install dependencies:

   pnpm install

3. Configure environment variables:

   For the mobile app, create a .env.local file in the packages/mobile directory:

   cd packages/mobile
   cp .env.local.example .env.local

   Then edit the .env.local file to set your sync server URL:

   EXPO_PUBLIC_LIVESTORE_SYNC_URL=http://localhost:8787
   

   For the web app, create a .env.local file in the packages/web directory:

   cd packages/web
   cp .env.local.example .env.local

   Then edit the .env.local file to set your sync server URL:

   VITE_LIVESTORE_SYNC_URL=http://localhost:8787
   

4. Set up the Cloudflare D1 database for the sync backend: (OPTIONAL - You can do this in localhost)

   cd packages/sync-backend

   Create a new D1 database in Cloudflare:

   npx wrangler d1 create livestore-sync-cf-demo

   This will output something like:

   ✅ Successfully created DB 'livestore-sync-cf-demo' in account 'your-account'
   Created database 'livestore-sync-cf-demo' with ID: fd58992d-e1fd-45a2-9e41-2f1bbe80f7ea
   

   Update the wrangler.toml file with your database ID:

   [[d1_databases]]
   binding = "DB"
   database_name = "livestore-sync-cf-demo"
   database_id = "your-database-id-here"

5. Start the development servers:

   For the web application:

   cd packages/web
   pnpm run dev

   For the mobile application:

   cd packages/mobile
   pnpm run dev

   For the sync backend:

   cd packages/sync-backend
   pnpm run dev