Manual installation

Set up your project

To have a Weave.js project running, follow these steps:

Install Next.js

If you don't have a Next.js 14 project already, start by creating a new one. Run the following command, and when prompted, accept all the default values:

npx create-next-app@next-14

When finished, navigate to the app folder and:

• Delete the node_modules folder.
• Delete the package-lock.json file.

Update add the following on the the package.json file:

• Add the type property and set it to module:

{
  ...
  "type": "module",
  ...
}

• Add the overrides section to the package.json file in order to force the use of React 18.2.0 version:

{
  ...
  "devDependencies": {
    ...
  },
  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

• Set strict dependencies for react and react-dom to version 18.2.0, and version 18.3.7 for@types/react and @types/react-dom as follows:

{
  ...
  "dependencies": {
    ...
    "react": "18.2.0",
    "react-dom": "18.2.0",
    ...
  },
  "devDependencies": {
    ...
    "@types/react": "18.3.7",
    "@types/react-dom": "18.3.7",
    ...
  },
  ...
}
``

Now execute a new install of the dependencies:

```shell
npm install

Set "baseUrl": "." in tsconfig.json to simplify module imports:

{
  "compilerOptions": {
    "baseUrl": ".",
    // ...
}

Navigate to the project folder and start the development server by running the following command:

npm run dev

Open http://localhost:3000 in your browser to see the Next.js base app.

Set up the backend

Follow the steps to set up the backend of the application.

Set up the frontend

Follow the steps to set up the frontend of the application.

Run the project

If you have completed all the previous steps, you should have a working project.

To run the project, use the following command:

npm run dev

In a browser, navigate to http://localhost:3000.

You will see the Enter Room page:

On it, enter a room name and your username, then click on the ENTER THE ROOM button.

Once the Room loads, you can:

• View the collaborative canvas.
• Zoom and pan the canvas.
• Create a simple node, such as a Rectangle.

Next, try opening another tab. Use a different username and the same room name and make some changes. In the first tab, you should see the changes made by this new user.

Congratulations! You have a working Weave.js application.