Skip to main content

A Quick Tour of the Starter App

The starter app utilizes npm workspaces to help organize the project into a few different packages:

  • client (frontend)
  • shared (common code between client and server: mutators, and todo model)
  • server (backend)

Here are a few key bits of code to look at to get a feel for how Replicache works:

  • shared/src/todo.ts defines the todo entity. You will typically have one such file for each entity in your application.
  • shared/src/mutators.ts defines the Replicache mutators for the todo app. Replicache mutators run twice: first immediately and optimistically on the client, then later authoritatively on the server. Replicache automatically reconciles differences between the optimistic and authoritative runs continuously on all clients.
  • client/react/src/index.tsx is the app's entrypoint. It initializes Replicache, and generates a new random todo list ID.
  • client/react/src/app.tsx is the top-level component. It subscribes to all todos in Replicache and renders them. It also wires up event handlers from the app to Replicache mutators.
  • server/src/server.ts is a simple Replicache server built with replicache-express. It handles all of the backend requests required by Replicache. (poke, pull, push, createSpace, spaceExists)


Now let's add a simple feature to this app.