A Quick Tour of the Starter App
The starter app utilizes npm workspaces to help organize the project into a few different packages:
shared(common code between client and server: mutators, and todo model)
Here are a few key bits of code to look at to get a feel for how Replicache works:
shared/src/todo.tsdefines the todo entity. You will typically have one such file for each entity in your application.
shared/src/mutators.tsdefines 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.tsxis the app's entrypoint. It initializes Replicache, and generates a new random todo list ID.
client/react/src/app.tsxis 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.tsis 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.