PeerTube Client Development Instructions for Coding Agents

Client Overview

This is the Angular frontend for PeerTube, a decentralized video hosting platform. The client is built with Angular 20+, TypeScript, and SCSS. It communicates with the PeerTube server API and provides the web interface for users, administrators, and content creators.

Key Technologies:

Angular 20+ with standalone components
TypeScript 5+
SCSS for styling
RxJS for reactive programming
PrimeNg and Bootstrap for UI components
WebdriverIO for E2E testing
Angular CLI

Client Build and Development Commands

Prerequisites (for client development)

Node.js 20+
yarn 1
Running PeerTube server (see ../server instructions)

Essential Client Commands

# From the client directory:
cd /client

# 1. Install dependencies (ALWAYS first)
yarn install --pure-lockfile

# 2. Development server with hot reload
npm run dev

# 3. Build for production
npm run build

Client Testing Commands

# From client directory:
npm run lint                # ESLint for client code

Common Client Issues and Solutions

Angular Build Failures:

Always run yarn install --pure-lockfile after pulling changes
Clear node_modules and reinstall if dependency errors occur
Build may fail on memory issues: NODE_OPTIONS="--max-old-space-size=4096" npm run build
Check TypeScript errors carefully - Angular is strict about types

Development Server Issues:

Default port is 3000, ensure it's not in use
Hot reload may fail on file permission issues
Clear browser cache if changes don't appear

Client Architecture and File Structure

Client Directory Structure

/src/
  /app/
    +admin/           # Admin interface components
    +my-account/      # User account management pages
    +my-library/      # User's videos, playlists, subscriptions
    +search/          # Search functionality and results
    +shared/          # Shared Angular components, services, pipes
    +standalone/      # Standalone Angular components
    +videos/          # Video-related components (watch, upload, etc.)
    /core/            # Core services (auth, server, notifications)
    /helpers/         # Utility functions and helpers
    /menu/            # Navigation menu components
  /assets/            # Static assets (images, icons, etc.)
  /environments/      # Environment configurations
  /locale/            # Internationalization files
  /sass/              # Global SCSS styles

Key Client Configuration Files

angular.json - Angular CLI workspace configuration
tsconfig.json - TypeScript configuration for client
e2e/wdio*.conf.js - WebdriverIO E2E test configurations
src/environments/ - Environment-specific configurations

Shared Code with Server (`../shared/`)

The client imports TypeScript models and utilities from the shared directory:

../shared/models/ - Data models (Video, User, Channel, etc.). Import these in client code: import { Video } from '@peertube/peertube-models'
../shared/core-utils/ - Utility functions shared between client/server. Import these in client code: import { ... } from '@peertube/peertube-core-utils'

Client Development Workflow

Making Client Changes

Angular Components: Create/modify in /src/app/ following existing patterns
Shared Components: Reusable components go in /src/app/shared/
Services: Core services in /src/app/core/, feature services with components
Styles: Component styles in .scss files, global styles in /src/sass/
Assets: Images, icons in /src/assets/
Routing: Routes defined in feature modules or app-routing.module.ts

Trust These Instructions

These instructions are comprehensive and tested specifically for client development. Only search for additional information if:

Commands fail despite following instructions exactly
New error messages appear that aren't documented here
You need specific Angular implementation details not covered above

For server-side questions, refer to the server instructions in ../.github/copilot-instructions.md.

4.1 KiB Raw Blame History