Purpose of the Apps Directory in makeplane/plane: Monorepo Architecture Explained

The apps directory serves as the root container for all runnable applications in Plane's monorepo, housing the web frontend, Django API, admin dashboard, live preview service, and embedded space UI as independent but interconnected workspace packages.

The makeplane/plane repository organizes its executable product components under the apps/ directory, following a monorepo pattern that enables independent development cycles while maximizing code reuse across the project management platform. Each subdirectory represents a self-contained application with its own package.json, build configuration, and entry points, yet all leverage shared libraries defined in the packages/ workspace.

Applications in the Apps Directory

The apps/ folder contains five distinct applications that collectively power the Plane platform.

apps/web – The Main Single-Page Application

Located at apps/web/, this is the primary client-side application that users interact with in their browsers. Built as a Single-Page Application (SPA) using Vite, it serves as the main interface for project management features.

The entry point is apps/web/src/index.tsx, which bootstraps the React application. The build configuration resides in apps/web/vite.config.ts.

# Start only the web application

pnpm dev --filter=web

This command launches the Vite development server, typically available at http://localhost:3000.

apps/api – The Django Backend

The apps/api/ directory houses the Django-based backend service that provides REST and GraphQL endpoints, authentication mechanisms, and core business logic. Unlike the frontend applications, this service runs on Python.

The main entry point is apps/api/manage.py. The package.json in this directory defines the startup script:

{
  "name": "plane-api",
  "scripts": {
    "dev": "python manage.py runserver 0.0.0.0:8000"
  }
}

You can start the API using the workspace command:

pnpm dev --filter=api

Alternatively, using Docker:

docker compose -f docker-compose-test.yml up api

apps/admin – Administrative Interface

The apps/admin/ directory contains a dedicated administrative UI for platform management. It shares the same React-based technology stack as the main web application, with its entry point at apps/admin/src/index.tsx.

Start the admin panel independently:

pnpm dev --filter=admin

apps/live – PDF Generation Service

Located at apps/live/, this service renders PDF and HTML snapshots of Plane pages for sharing and printing capabilities. It uses the react-pdf library for document generation, with core logic in apps/live/src/lib/pdf/plane-pdf-exporter.tsx.

Run the live preview service:

pnpm dev --filter=live

apps/space – Embedded Micro-Frontend

The apps/space/ directory contains a lightweight, embedded version of the Plane UI designed for iframe hosting or deployment as a separate micro-frontend. It allows external integration while maintaining the core user experience, with entry at apps/space/src/index.tsx.

Launch the space application:

pnpm dev --filter=space

Shared Infrastructure and Dependencies

All applications under apps/ share the same TypeScript configuration (tsconfig.json) and workspace tooling defined in pnpm-workspace.yaml. This setup enables:

• Independent development – Each app boots, lints, and builds in isolation using the --filter flag
• Code reuse – Common components from @plane/ui, utilities from @plane/utils, and state management from @plane/shared-state are imported via workspace:* protocol
• Consistent CI/CD – GitHub Actions workflows like .github/workflows/pull-request-build-lint-web-apps.yml run type-checking and linting across all apps in parallel

The frontend applications (web, admin, space) communicate with the backend via the @plane/services package, which wraps HTTP calls to the Django server. The live service also consumes these API endpoints while generating exportable documents.

Running Individual Applications

The monorepo structure allows you to work on specific components without launching the entire stack. After installing dependencies with pnpm install, target specific applications:

# Frontend development

pnpm dev --filter=web

# Backend development (requires Python environment or Docker)

pnpm dev --filter=api

# Auxiliary services

pnpm dev --filter=admin
pnpm dev --filter=live
pnpm dev --filter=space

Each command respects the individual package.json scripts defined in the respective application directories.

Summary

• The apps directory in makeplane/plane serves as the application layer of the monorepo, containing all runnable product components
• Five distinct applications reside here: web (main SPA), api (Django backend), admin (management UI), live (PDF service), and space (embedded frontend)
• Each application maintains independent build configurations while sharing common libraries from the packages/ workspace
• The PNPM workspace configuration enables targeted development using --filter flags for efficient resource usage
• CI/CD pipelines process all applications in parallel to ensure uniform code quality across the platform

Frequently Asked Questions

What is the difference between apps/web and apps/space?

While both are React-based frontend applications, apps/web serves as the full-featured primary interface for Plane users, whereas apps/space provides a lightweight, embeddable version designed for iframe integration or micro-frontend deployment. They share UI components from @plane/ui but target different use cases and deployment contexts.

How do the frontend applications communicate with the backend?

The frontend apps (web, admin, space) utilize the @plane/services package, which contains HTTP client wrappers for the Django API endpoints. This shared package standardizes API calls across all client applications, ensuring consistent error handling and data fetching patterns when communicating with the apps/api service.

Can I run individual apps without starting the entire monorepo?

Yes. The PNPM workspace configuration supports targeted execution using the --filter flag. For example, pnpm dev --filter=web starts only the Vite development server for the web application, while other services remain idle. This approach minimizes resource consumption during development and allows teams to work on specific domains independently.

What build tool does Plane use for the frontend apps?

Plane uses Vite as the build tool and development server for all frontend applications (web, admin, space, and live). Each app has its own vite.config.ts file under its respective directory, allowing customization while maintaining the fast development experience and optimized production builds that Vite provides.

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