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

> Explore the makeplane/plane apps directory. Learn about the web, admin, and live applications, their Vite configs, TypeScript code, MobX stores, and static assets powering Plane's frontend.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: how-to-guide
- Published: 2026-06-25

---

**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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/vite.config.ts), [`tsconfig.json`](https://github.com/makeplane/plane/blob/main/tsconfig.json), and [`postcss.config.js`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/manifest.json), service workers, and icon sets in `public/plane-logos/`.
- **State management**: [`core/store/user/profile.store.ts`](https://github.com/makeplane/plane/blob/main/core/store/user/profile.store.ts) and related files implement MobX stores that manage user authentication and workspace data.
- **Utilities**: [`helpers/authentication.helper.tsx`](https://github.com/makeplane/plane/blob/main/helpers/authentication.helper.tsx) and [`helpers/issue-filter.helper.ts`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/vite.config.ts), [`tsconfig.json`](https://github.com/makeplane/plane/blob/main/tsconfig.json), and [`postcss.config.js`](https://github.com/makeplane/plane/blob/main/postcss.config.js) handle compilation independently from the main web app.
- **State management**: [`store/workspace.store.ts`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/src/server.ts) initializes the Express-based HTTP server.
- **Services**: [`src/services/pdf-export/pdf-export.service.ts`](https://github.com/makeplane/plane/blob/main/src/services/pdf-export/pdf-export.service.ts) implements the core logic for generating project PDFs, while [`src/services/user.service.ts`](https://github.com/makeplane/plane/blob/main/src/services/user.service.ts) handles user-related operations.
- **Infrastructure**: [`src/redis.ts`](https://github.com/makeplane/plane/blob/main/src/redis.ts) configures the Redis client for pub/sub messaging.
- **Testing**: [`tests/services/pdf-export/effect-utils.test.ts`](https://github.com/makeplane/plane/blob/main/tests/services/pdf-export/effect-utils.test.ts) contains Vitest unit tests verifying PDF generation utilities.
- **Build configuration**: [`vite.config.ts`](https://github.com/makeplane/plane/blob/main/vite.config.ts) and [`tsdown.config.ts`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/tsconfig.json)**: Configures TypeScript strict mode and path mapping for imports.
- **[`postcss.config.js`](https://github.com/makeplane/plane/blob/main/postcss.config.js)**: Processes Tailwind CSS and other CSS transformations.
- **[`package.json`](https://github.com/makeplane/plane/blob/main/package.json)**: Declares npm scripts, dependencies, and workspace metadata that integrate with the root [`package.json`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/manifest.json) (web) and [`site.webmanifest.json`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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/`:

```typescript
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`](https://github.com/makeplane/plane/blob/main/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:

```typescript
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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/apps/web/public/manifest.json):

```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`](https://github.com/makeplane/plane/blob/main/vite.config.ts)**, **[`tsconfig.json`](https://github.com/makeplane/plane/blob/main/tsconfig.json)**, and **[`package.json`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/src/server.ts)), Redis integration ([`src/redis.ts`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/core/store/user/profile.store.ts) define observable state containers that React components consume via hooks. The [`helpers/authentication.helper.tsx`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/vite.config.ts) and [`tsconfig.json`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/apps/web/public/manifest.json) defines PWA properties, while [`apps/admin/public/site.webmanifest.json`](https://github.com/makeplane/plane/blob/main/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`.