Quickstart

Scaffold the backend project

First, create the backend server that will handle all the real-time synchronization using a Weave.js Store provider. In this case, we use the Weave.js Store WebSockets.

Open a terminal on your preferred folder and execute the following command:

pnpm create weave-backend-app

This command will launch Weave.js create backend CLI with the following steps:

1. Project name: The folder name where the backend project will be created (e.g. my-service).

2. Select the store: For this quickstart, select the store named:

   Express.js: Weave.js Websockets Store

3. Install dependencies automatically: Select YES. This will install the necessary dependencies of the project.

After the CLI finishes execute the following:

cd [backend-project-name]
pnpm run dev

This will start the backend server at http://localhost:8080.

To verify everything is running correctly, open a browser and enter the URL http://localhost:8080/api/v1/health.

You should see the following response:

{ "status": "OK" }

Scaffold the frontend project

Now let's create the frontend application on top of Next.js and powered by Weave.js. This will render the UI and canvas with live updates.

Open a terminal on the same parent folder as the backend side project and execute the following command:

pnpm create weave-frontend-app

This command will launch Weave.js create frontend CLI with the following steps:

1. Project name: The folder name where the frontend project will be created (e.g. my-app).

2. Select the store: For this quickstart, select the store named:

   Express.js: Weave.js Websockets Store

3. Install dependencies automatically: Select YES. This will install the necessary dependencies of the project.

After the CLI finishes execute the following:

cd [frontend-project-name]
pnpm run dev

This will start the Next.js frontend application at http://localhost:3030.

Open a browser and navigate to http://localhost:3030. You should see the following screen (please be patient, as Next.js may take a moment to compile the pages):

Run the application

To run the collaborative tool, follow these steps:

1. Enter the room name you want to join.
2. Type your username.
3. Press the ENTER button.

Once the room is loaded (note that pages may take some time to compile), you should see the following screen:

Try adding a rectangle and enjoy!