Skip to content

A small light weight web app to collaborate using text.

License

Notifications You must be signed in to change notification settings

majumdartanmay/collab

Repository files navigation

Introduction

This is light weight realtime text collabation tool. It has the following key components

  1. YJS for CRDT
  2. Monaco for editor
  3. WebRTC as communication protocol
  4. Node Node js for signalling server and authentication server
  5. MySQL MySQL database to store room passwords and room creator information

User flow


Build

Requirements

  • node v18.0.0
  • npm 9.8.1

Starting the backend

Quick start with docker

The backend has mainly 3 components. Signalling server, authentication server and a MySQL database

cd backend; node init.js ; docker-compose build --no-cache ; docker-compose up

This wil start the MySQL database, signalling server and auth server with the default values which are present in backend.json

Signalling server

This editor needs a signalling server. We will explain how to start the server.

Go to backend.json and edit the SIGNALLING_SERVER to the IP address of the machine where you will be running the server. You can choose to change the SIGNALLING PORT if you want.

We need to start the signalling server

cd backend
npm install
node server.js

Start the user authentication backend server

Anyone who creates a new room is known as the admin of that room. Admins get to set the password of their room. This record of room, admin, password is stored in a MySQL database. The APIs to store and verify this information are present in app.js . Without this node service, the room creation and password verification will fail.

To configure the details of this server go to backend.json and configure the listed details

{
    "AUTH_PORT": 24555,
    "BACKEND_URL_SCHEME": "http",
    "SALT_LENGTH": 7,
    "SIGNALLING_PORT": 24444,
    "SIGNALLING_SERVER": "0.0.0.0",
    "BACKEND_SERVER": "0.0.0.0", 
    "CLIENT": {
        "SIGNALLING_SERVER": "localhost",
        "BACKEND_SERVER": "localhost" 
    }
}

These properties are relevant for the authentication service. App.js will run in the AUTH_PORT.

Configuring DB details

To configure the details of this server go to db.json and configure the listed details

{
    "usertable": "users",
    "service_name": "mysql_service",
    "host": "localhost",
    "user": "collab_user",
    "password": "Collab_11122023",
    "database": "collab",
    "port": 21992,
    "connectTimeout": 60000,
    "root_password": "MySQLRootPassword",
    "health_table": "collab_health_table"
}

Create the collab database in MySQL

You can run the DDL and DML scripts which we have added in schema-template.sql

cd backend && npm install
npm install
node app.js

Starting frontend

npm install
npm run dev

Deployment frontend

If after compilation you want to run on production mode in local. Then run the following commands

npm install
npm run build
npm run preview

Run unit tests

Collab Unit Tests

Unit tests have been created using jest

npm install
npm run test

About

A small light weight web app to collaborate using text.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published