Environment Setup

Major Dependencies

• Quill.js is an API-driven WYSIWYG rich text editor built for compatibility and extensibility. We choose Quill as our editor because of the ease to plug it into your application and the availability of extensions.

• React-quilljs is a React hook wrapper for Quill that enables us to build a React component for a collaborative textbox. Note that it is NOT ReactQuill.

• Yjs is a CRDT framework with a powerful abstraction of shared data. You can also find other similar libraries on crdt.tech, for example, automerge. We chose Yjs because of its superb performance and its readily available bindings for Quill.js.

• y-websocket provides a WebSocket connector for Yjs. Note that it is not the only option, other network providers such as WebRTC and Dat are available here.

Docker image for this lab

We use Docker to maintain the environment for this lab. If you don't have the docker engine installed on your own machine, please refer to https://docs.docker.com/get-docker.

We have pushed our docker image with all the dependencies and code installed to dockerhub. To launch a docker container with our image, you can run this in your terminal:

docker run -it -p 3000:3000 ericlohk/crdt-env

Note that the command may fail because port 3000 may be in use by other students. In this case, try another port between 1024 ~ 65535

Workspace

The above command will take you into a shell environment on a minimal Linux distribution Alpine. You will be under the directory /App, which includes all the dependencies and code:

/app # ls
Dockerfile    node_modules  package.json  public        src           yarn.lock

This will also be our workspace for this lab.