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, use the Weave.js Store WebSockets.

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

pnpm create weave-backend-app

The CLI will prompt you with the following:

1. Project name: The folder name for the backend project (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.

Once complete, start the server:

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, create the frontend application on top of Next.js and powered by Weave.js. This project will render the UI and canvas with live updates.

Open a new terminal in the same parent folder as the backend project and execute the following command:

pnpm create weave-frontend-app

The CLI will prompt you with the following:

1. Project name: The folder name for the frontend project (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.

Once complete, start the frontend application:

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 room entry page (Next.js may take a moment to compile):

Join a room and interact with the canvas

To start using the canvas, 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:

Add shapes, draw elements, or interact with objects on the canvas. Changes are synchronized in real time across all participants in the room.