create-replicache-app

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

$ npx replicache get-license

Set your VITE_REPLICACHE_LICENSE_KEY or NEXT_PUBLIC_REPLICACHE_LICENSE_KEY environment variable

$ export VITE_REPLICACHE_LICENSE_KEY="<your license key>"
$ export NEXT_PUBLIC_REPLICACHE_LICENSE_KEY="<your license key>"

Install and Build

$ npm install; npm run build;

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

react

$ npm run watch --ws

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.

$ npm run watch --ws

nextjs

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

$ npm run dev --ws

Production mode

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

$ npm run prod --ws

Deploying to Render

A render blueprint example is provided to deploy the application.

$ cp render.yaml.example render.yaml

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

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

Commit the changes and follow the direction on Deploying to Render

Upcoming Frameworks

• React Native
• Svelte
• SolidJS
• Vue