Skip to main content

Getting Started

Install#

npm add replicache replicache-react-util

Serve Wasm Module#

Replicache uses Wasm internally. Most bundlers don't deal with this well yet, so it's easiest to just serve it as a static asset.

Copy the Replicache Wasm module to your static assets directory:

cp node_modules/replicache/out/*.wasm public/
note

You should add a postinstall script to do this in your app, so that it will stay up to date when you update Replicache.

Client Setup#

import {Replicache} from 'replicache';
import {useSubscribe} from 'replicache-react-util';
const rep = new Replicache({
// Put the correct path to replicache.wasm.br on your server here.
wasmModule: '/replicache.wasm',
mutators: {
createTodo: (tx, args) => {
tx.put(`/todo/${args.id}`, args);
},
},
});
function MyComponent() {
const todos = useSubscribe(
rep,
tx => tx.scan({prefix: '/todo/'}).toArray(),
[],
);
const handleClick = () => {
rep.mutate.createTodo({
id: Math.random().toString(32).substr(2),
order: todos.length,
text: 'new todo!',
});
};
// ...
}

Server Setup#

In order to sync, you will need to implement push an pull endpoints on your server.

For detailed information, see the integration guide, or the push/pull reference docs.