!Replicache logo

replicache-quickstarts

This repository contains quickstarts and sample code for Replicache. There are multiple option to run various frontend framework with a common express server backend. The backend utilizes the replicache-express library which implements the push, pull, poke, createSpace, and spaceExists handlers required for Replicache sync protocol. This library intends to help developers easily experiment with various frontend frameworks integrated with Replicache.

1. Setup

#### Get your Replicache License Key

``bash
$ npx replicache get-license
`

#### Set your VITE_REPLICACHE_LICENSE_KEY environment variable

`bash
$ export VITE_REPLICACHE_LICENSE_KEY=""
`

#### Install and Build

`bash
$ npm install; npm run build;
`

2. Decide on a framework and start frontend and backend watcher

#### react

`bash
$ npm run watch --ws react
`

Provides an example integrating replicache with react in a simple todo application.

#### ts-web-component

Provides an example integrating replicache with vanilla typescript in a simple todo application. This library utilizes W3C standard web-components. It does not have any requirements to run any external library frameworks.

`bash
$ npm run watch --ws ts-web-component
`

Production mode

The server can serve the output of the various frameworks and be run as a static server to simulate a production environment.

`bash
$ npm run prod --ws
`

Deploying to Render

A render blueprint example is provided to deploy the application.

`bash
$ cp render.yaml.example render.yaml
`

Open the YAML file and modify the following lines to the appropriate framework

`
name: replicache-quickstarts-todo- # change e.g. (replicache-quickstarts-todo-)
startCommand: "cd ./client/ && npm run prod"
``

Commit the changes and follow the direction on Deploying to Render

Upcoming Frameworks

- React Native
- Svelte
- SolidJS
- Vue