Mostly Serious Craft CMS

Documentation

• Configuration Directory - Craft CMS settings, plugin configurations, and project structure
• Modules Directory - Custom Craft CMS modules, services, and backend functionality
• Source Directory - Frontend architecture, components, and development patterns
• Utility Scripts and Modules - Environment configuration, setup scripts, and asset optimization plugins

Installation

composer create-project --no-install mostlyserious/craftcms $PROJECT_NAME

JavaScript Tooling

This template uses DDEV as the source of truth for JavaScript tooling:

• .ddev/config.yaml installs Node 24 and enables Corepack
• package.json pins [email protected] through the packageManager field
• pnpm-lock.yaml is the shared dependency lockfile
• pnpm-workspace.yaml installs native development-tool binaries for the current platform plus Darwin/Linux ARM64, so DDEV scripts and host IDE tooling can use the same dependency tree
• run pnpm package-manager commands through DDEV with ddev pnpm ...
• run package.json scripts through DDEV with ddev pnpm run ...

DDEV treats node_modules as an upload directory so Mutagen does not sync it. Run dependency installs through ddev pnpm ...; supportedArchitectures keeps the native binaries needed by the Linux container and common host IDE environments available from the same dependency tree.

If you pull changes that affect .ddev/config.yaml, run ddev mutagen reset before continuing when Mutagen is enabled for your local DDEV project.

Use DDEV as the source of truth for app/runtime behavior:

• ddev craft ...
• ddev pnpm install --frozen-lockfile to install JavaScript dependencies
• ddev pnpm add ... and ddev pnpm remove ... for dependency changes
• ddev pnpm run build to build assets inside DDEV
• ddev pnpm run dev to start Vite inside DDEV
• ddev pnpm run fmt for repo formatting, including Svelte files, inside DDEV
• ddev pnpm run fmt:check to verify formatting without writing changes
• ddev pnpm run lint to run Oxlint
• ddev pnpm run check for full frontend validation, including TypeScript and Svelte diagnostics, inside DDEV
• ddev pnpm test -- --run to run the Vitest suite once

This template also commits shared workspace settings for Zed and VS Code. VS Code users should install the recommended extensions when prompted. Editors use the same project dependency tree created by ddev pnpm install --frozen-lockfile.

This template does not require Bun, Vite Plus, ESLint, devcontainers, remote development features, dependency sync scripts, or a custom node_modules Docker volume to be productive in Zed, VS Code, or other IDEs.

Configuration Files

This project includes several configuration files that define code quality standards, build processes, and development tooling:

Code Quality & Linting

• .editorconfig - Editor configuration for consistent code formatting across different editors and IDEs. Defines indentation, line endings, and character encoding standards.

• oxlint.config.ts - Oxlint configuration for JavaScript, TypeScript, and Svelte script-block linting. Defines lint rules, plugins, and file-specific overrides for the frontend codebase.

• oxfmt.config.ts - Oxfmt configuration for repository-wide formatting, including Svelte file formatting. Acts as the shared formatter source for CLI usage and editor integration.

• pint.json - Laravel Pint configuration for PHP code formatting. Uses Laravel preset with additional rules for strict typing, ordered imports, and consistent code structure.

• stylelint.config.ts - Stylelint configuration extending Hudochenkov's property order rules for CSS consistency.

Build & Development

• vite.config.ts - Vite build configuration that handles:

  • Asset bundling and optimization
  • Development server setup with hot module replacement
  • Integration with Tailwind CSS, Svelte, and custom plugins
  • Path aliases for easier imports
  • Production build optimization with code splitting

• tsconfig.json - TypeScript configuration defining:

  • Compilation targets and module resolution
  • Path mappings for project aliases ($lib, $css, $img, etc.)
  • Strict type checking rules
  • Include/exclude patterns for source files

• package.json - Node.js package configuration containing:

  • Development and production dependencies
  • Vite scripts (dev, build)
  • Quality scripts (fmt, fmt:check, lint, check, test)
  • Project metadata and type module declaration

Development Workflow

These configuration files work together to provide:

• Consistent code formatting and style enforcement
• Modern JavaScript/TypeScript development with Svelte support
• Optimized asset bundling and processing
• Hot module replacement for rapid development
• Production-ready builds with code splitting and optimization