Tutorial

Introduction

This tutorial will walk you through the codebase of AFFiNE. It is intended for new contributors to AFFiNE.

Building the project

Make sure you know how to build the project. See BUILDING for more information.

For the debugging purpose, you might need use local OctoBase on port 3000.

Codebase overview

The codebase is organized as follows:

• apps/ contains the source code for the different entry points of the project.
  • web/ contains the source code for the web app.
  • electron/ contains the source code for the Electron app.
  • server/ backend side for AFFiNE, see https://github.com/toeverything/OctoBase instead.
• packages/ contains the source code for all the packages in the repo.
  • cli contains the source code for the CLI. Development only.
  • component contains the source code for the UI component library.
  • debug contains the source code for the debug helper.
  • env contains the source code for the environment setup.
  • hooks contains the source code for the custom React hooks.
  • i18n contains the source code for the internationalization.
  • jotai contains the source code for the Jotai store atoms.
  • octobase-node contains the source code for the OctoBase Node.js binding using Rust.
  • templates contains the source code for the templates.
  • workspace contains the source code for the workspace related code.

@affine/env

Environment setup for AFFiNE client side.

It includes the global constants, browser and system check.

This package should be imported at the very beginning of the entry point.

@affine/workspace

Current we have two workspace plugin:

• local for local workspace, which is the default workspace type.
• affine for cloud workspace, which is the workspace type for AFFiNE Cloud with OctoBase backend.

Design principles

• Each workspace plugin has its state and is isolated from other workspace plugins.
• The workspace plugin is responsible for its own state management, data persistence, synchronization, data backup and recovery.

For the workspace API, see types.ts.

@affine/component

The UI component library for AFFiNE.

Each component should be a standalone component which can be used in any context, like the Storybook.

Debugging Environments

@affine/env

yarn dev

@affine/electron

See building desktop client app.

@affine/component Storybook

yarn workspace @affine/component storybook

What's next?

• Behind the code