webapp/CLAUDE.OPTIONAL.md
Guidance for Claude Code when working inside webapp/.
This is the Mattermost web app codebase, a React-based frontend application for the Mattermost collaboration platform. The repository is structured as an npm workspace monorepo with multiple packages, with the main application code in the channels package and shared platform code in platform/* packages.
channels/ (UI, Redux, routing).platform/*.webapp/scripts/ power dev server, builds, and localization flows.webapp/STYLE_GUIDE.md for canonical standards; nested CLAUDE.md files cover directory-specific rules.| Task | Command |
|---|---|
| Install deps | npm install (includes postinstall build of platform packages) |
| Dev server (prod build watch) | make run |
| Dev server (webpack-dev-server) | make dev or npm run dev-server --workspace=channels |
| Build all workspaces | make dist or npm run build |
| Build Channels only | npm run build --workspace=channels |
| Tests | make test or npm run test --workspace=channels (use test:watch, test:updatesnapshot as needed) |
| Lint / Style | make check-style, make fix-style, npm run check --workspace=channels, npm run fix --workspace=channels |
| Type check | make check-types |
| Clean artifacts | make clean or npm run clean --workspaces --if-present |
channels/ – Channels workspace. See channels/CLAUDE.md.
src/ – App source with further scoped guides (components, actions, selectors, reducers, store, sass, i18n, tests, utils, types, plugins, packages/mattermost-redux).platform/ – Shared packages (client, components, types, eslint-plugin). See platform/CLAUDE.md plus sub-guides.scripts/ – Build/dev automation. See scripts/CLAUDE.md.STYLE_GUIDE.md – Authoritative style + accessibility + testing reference.README.md, config.mk, Makefile – onboarding, env config, and command wiring.This repository uses npm workspaces:
channels/): Main Mattermost web app containing all UI components, Redux logic, and application codeplatform/types/): TypeScript type definitionsplatform/client/): REST and WebSocket client for the Mattermost APIplatform/components/): Shared React componentsplatform/eslint-plugin/): Custom ESLint rulesAlways import packages using their full name, never relative paths:
// Correct
import {Client4} from '@mattermost/client';
import {UserProfile} from '@mattermost/types/users';
import {getUser} from 'mattermost-redux/selectors/entities/users';
// Incorrect
import Client4 from '../platform/client/src/client4.ts';
WithTooltip component)channels/webpack.config.js: Webpack configuration with module federationchannels/jest.config.js: Jest test configurationchannels/tsconfig.json: TypeScript configuration with workspace referenceschannels/.eslintrc.json: ESLint configurationFormattedMessage unless a raw string is required. When adding or modifying a new translatable string, add or modify ONLY the English main file en.json. DO NOT update the other languages.!important unless migrating legacy code.userEvent for tests; no snapshots. Use helpers under channels/src/tests/.STYLE_GUIDE.md (semantic elements, keyboard support, focus management).npm install; re-run if types appear stale.npm add <pkg> --workspace=channels (or the relevant workspace).state.entities.* (server data via mattermost-redux) vs state.views.* (UI/persisted). Store new server entities in mattermost-redux first.{response, headers, data} – unwrap accordingly in actions.channels/CLAUDE.md, channels/src/CLAUDE.md.components/, actions/, selectors/, reducers/, store/, sass/, i18n/, tests/, utils/, types/, plugins/, packages/mattermost-redux/.platform/CLAUDE.md, plus platform/client/, platform/components/, platform/types/.scripts/CLAUDE.md.Use these nested guides for focused, actionable instructions when working within each directory.