What Files Are in the Apps Directory of makeplane/plane? A Complete Guide to the Monorepo Structure

The apps directory contains three distinct applications—web, admin, and live—each structured with Vite configuration files, TypeScript source code, MobX state stores, and static assets that collectively power Plane's frontend and real-time services.

The makeplane/plane repository organizes its frontend architecture within the apps directory, housing the browser-based UI, administrative console, and server-side live services. Understanding the file structure of these applications is essential for developers contributing to the project or extending its functionality. Each subdirectory follows consistent patterns for build configuration, asset management, and source code organization while serving distinct operational purposes.

The Three Applications in apps/

The monorepo divides functionality into three specialized packages, each with its own package.json and build pipeline.

apps/web: The Main User Interface

This directory contains the primary end-user application built with React and TypeScript. The file layout in apps/web/ follows standard Vite conventions with Plane-specific additions for state management and PWA support.

Key file locations:

• Build configuration: vite.config.ts, tsconfig.json, and postcss.config.js configure the Vite bundler, TypeScript compiler strict mode, and PostCSS processing.
• Static assets: The public/ subdirectory stores PWA files including manifest.json, service workers, and icon sets in public/plane-logos/.
• State management: core/store/user/profile.store.ts and related files implement MobX stores that manage user authentication and workspace data.
• Utilities: helpers/authentication.helper.tsx and helpers/issue-filter.helper.ts provide reusable logic for authentication flows and UI filtering.

apps/admin: The Administrative Console

This package powers the internal admin interface for workspace owners and system administrators. It mirrors the web app's structure but with specialized store implementations for administrative functions.

Key file locations:

• Build configuration: vite.config.ts, tsconfig.json, and postcss.config.js handle compilation independently from the main web app.
• State management: store/workspace.store.ts manages workspace-level configurations and user permissions specific to admin operations.
• React providers: providers/ contains React context definitions for theme and authentication wrappers.
• Public assets: public/site.webmanifest.json and favicon files support the admin interface's standalone PWA capabilities.

apps/live: Server-Side Live Services

Unlike the client-side applications, apps/live runs as a server-side service handling PDF exports and real-time updates via WebSocket connections. This Node.js/TypeScript service uses Vitest for testing and maintains its own build pipeline.

Key file locations:

• Entry points: src/server.ts initializes the Express-based HTTP server.
• Services: src/services/pdf-export/pdf-export.service.ts implements the core logic for generating project PDFs, while src/services/user.service.ts handles user-related operations.
• Infrastructure: src/redis.ts configures the Redis client for pub/sub messaging.
• Testing: tests/services/pdf-export/effect-utils.test.ts contains Vitest unit tests verifying PDF generation utilities.
• Build configuration: vite.config.ts and tsdown.config.ts manage different build targets for development and production.

Common File Patterns Across All Apps

Despite serving different purposes, all three applications share structural conventions that streamline development in the monorepo.

Configuration Files

Each app maintains independent build tooling to allow parallel development:

• vite.config.ts: Defines Vite plugins, path aliasing (e.g., @/ mapping to src/), and environment variable handling specific to each app's runtime requirements.
• tsconfig.json: Configures TypeScript strict mode and path mapping for imports.
• postcss.config.js: Processes Tailwind CSS and other CSS transformations.
• package.json: Declares npm scripts, dependencies, and workspace metadata that integrate with the root package.json for unified dependency management.

Static Assets and Public Files

Every application includes a public/ directory containing files copied verbatim to the build output:

• PWA manifests: manifest.json (web) and site.webmanifest.json (admin) define app metadata, icons, and start URLs.
• Icons: Logo variations and favicon sets for different device resolutions.
• Service workers: JavaScript files handling offline functionality and push notifications.

Source Code Organization

The TypeScript source follows logical grouping principles:

• helpers/ (web): Pure utility functions for data transformation and API interaction.
• store/ (web and admin): MobX-based state containers synchronizing UI with backend data.
• src/services/ (live): Business logic classes encapsulating PDF generation, user management, and Redis interactions.
• styles/: Global CSS files like globals.css establishing base themes and Tailwind directives.

Practical Code Examples

Accessing MobX Stores in the Web App

The apps/web directory uses MobX for reactive state management. Components observe store changes through the observer Higher-Order Component defined in apps/web/core/store/:

import { observer } from 'mobx-react-lite';
import { useWorkspaceStore } from '@/core/store/workspace';

const WorkspaceHeader = observer(() => {
  const store = useWorkspaceStore();
  return <h1>{store.currentWorkspace?.name ?? 'Untitled'}</h1>;
});

This pattern appears throughout apps/web/helpers/issue-filter.helper.ts and related UI helpers.

Generating PDFs in the Live Service

The apps/live service exports project data as PDF documents through the PDFExportService class:

import { PDFExportService } from '@/services/pdf-export/pdf-export.service';

export async function exportProjectPdf(projectId: string) {
  const pdf = await PDFExportService.generateForProject(projectId);
  // Returns a Buffer for streaming to connected clients
  return pdf;
}

The implementation in apps/live/src/services/pdf-export/pdf-export.service.ts handles headless browser automation and PDF rendering.

Configuring PWA Assets

Static assets for progressive web app functionality reside in apps/web/public/. To add a new mobile icon:

1. Place plane-mobile-pwa.png in apps/web/public/plane-logos/
2. Reference it in apps/web/public/manifest.json:

{
  "icons": [
    {
      "src": "/plane-logos/plane-mobile-pwa.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Summary

• The apps directory contains three distinct packages: web (end-user UI), admin (management console), and live (PDF streaming service).
• Each application maintains independent vite.config.ts, tsconfig.json, and package.json files to support parallel development and deployment.
• Static assets live in public/ subdirectories, including PWA manifests and icon sets for offline functionality.
• TypeScript source is organized into helpers/ (utilities), core/store/ or store/ (MobX state), and src/services/ (business logic).
• The apps/live package uniquely includes a tests/ directory with Vitest suites for verifying PDF export functionality.

Frequently Asked Questions

What is the purpose of the apps/live directory in makeplane/plane?

The apps/live directory contains a server-side Node.js application that handles resource-intensive operations like PDF generation and real-time data streaming. Unlike the client-side React applications in web and admin, this package includes server entry points (src/server.ts), Redis integration (src/redis.ts), and Vitest test suites in tests/ to validate PDF export utilities.

How does state management work in the apps/web directory?

State management in apps/web relies on MobX stores located in core/store/. Files like core/store/user/profile.store.ts define observable state containers that React components consume via hooks. The helpers/authentication.helper.tsx file demonstrates how these stores integrate with authentication flows, persisting user sessions and workspace contexts across the application.

Why does each app in the apps directory have its own build configuration?

Each application maintains separate vite.config.ts and tsconfig.json files to enable independent bundling and deployment. This separation allows the web app to optimize for browser PWA delivery, the admin console to load distinct administrative modules, and the live service to compile server-side code with Node.js-specific settings via tsdown.config.ts, all while sharing common dependencies through the monorepo workspace.

Where are static assets like icons and manifests stored in the Plane apps?

Static assets reside in the public/ subdirectory within each app folder. For example, apps/web/public/manifest.json defines PWA properties, while apps/admin/public/site.webmanifest.json serves the administrative interface. These files are copied directly to the build output without processing, making them accessible at root-relative URLs like /plane-logos/plane-mobile-pwa.png.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}