Building AFFiNE Web

Note For developing & building desktop client app, please refer to building-desktop-client-app.md

Table of Contents

• Prerequisites
• Setup Environment
• Start Development Server
• Testing

Prerequisites

We suggest develop our product under node.js LTS(Long-term support) version

Option 1: Manually install node.js

install Node LTS version

Up to now, the major node.js version is 18.x

Option 2: Use node version manager

install nvm

nvm install 18
nvm use 18

Setup Environment

This setup requires modern yarn (currently 3.5.0), run this if your yarn version is 1.x

Reference: Yarn installation doc

corepack enable
corepack prepare yarn@3.5.0 --activate

# install dependencies
yarn install

Start Development Server

Option 1: Local OctoBase

# Run OctoBase container in background
docker pull ghcr.io/toeverything/cloud-self-hosted:nightly-latest
docker run --env=SIGN_KEY=test123 --env=RUST_LOG=debug --env=JWST_DEV=1 --env=PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin --workdir=/app -p 3000:3000 --runtime=runc -d ghcr.io/toeverything/cloud-self-hosted:nightly-latest

# Run AFFiNE Web in development mode
yarn dev:local

Option 2: Remote OctoBase

yarn dev

you might need set environment variables in .env.local file. See our template.

Then, the playground page should work at http://localhost:8080/

For more details, see apps/web/README.md

Testing

Local OctoBase is required for testing. Otherwise, the affine part of the tests will fail.

Adding test cases is strongly encouraged when you contribute new features and bug fixes.

We use Playwright for E2E test, and vitest for unit test.

To test locally, please make sure browser binaries are already installed via npx playwright install. Then there are multi commands to choose from:

# run tests in headless mode in another terminal window
yarn test