# Run the application

After entering the workspace, it is very simple to run our application:

```
HOST=localhost PORT=1234 npx y-websocket-server & yarn start
```

`HOST=localhost PORT=1234 npx y-websocket-server` opens a local WebSocket server, so that each textbox (a.k.a room)  in our application can be connected with `ws://localhost:1234/${room_name}.` And `yarn start` invokes our application.

Then open your browser, and enter "localhost:{your-docker-container-port}" (if you are running docker on node-1, you need to use "node-1.cse.cuhk.edu.hk:{your-docker-container-port}") to see your application. (Note that the your-docker-container-port is the port you use when starting your docker container, in our example, it is 3000.)



## Demo Video

This video demonstrates how we collaborate across different webpages. There are three textboxes now, each connected via a unique WebSocket connection.

{% embed url="https://youtu.be/uETtfMgLld0" %}

Then, the second demo video shows how CRDTs enable the text to auto-merge. We can temporarily disconnect textboxes from the connection, thus the later changes in these textboxes will be local. After re-connecting, there will be some conflicts. With the help of CRDT, we don't have to handle these conflicts by hand:

{% embed url="https://youtu.be/02jj-AH2hUY" %}

## Customization

You are encouraged to customize the application to make it more full-fledged. For example, highlighting the cursor movements of different users as in Google Doc, supporting versioning, etc.
