Skip to main content

Tutorials 📚

Learn Presetter through practical, hands-on guides. Each tutorial walks you through real-world scenarios with complete examples and interactive tools.

Presetter Configuration Generator

Configure your project settings to generate the perfect Presetter setup:

Installation Command

pnpm add -D presetter @presetter/preset-essentials @presetter/preset-esm @presetter/preset-strict

presetter.config.ts

import preset0 from '@presetter/preset-essentials';
import preset1 from '@presetter/preset-esm';
import preset2 from '@presetter/preset-strict';

export default [
  preset0,
  preset1,
  preset2
];

package.json (partial)

{
  "devDependencies": {
    "presetter": "^9.0.0",
    "@presetter/preset-essentials": "^9.0.0",
    "@presetter/preset-esm": "^9.0.0",
    "@presetter/preset-strict": "^9.0.0"
  },
  "scripts": {
    "build": "run build",
    "clean": "run clean",
    "typecheck": "run typecheck",
    "lint": "run lint",
    "format": "run format",
    "test": "run test"
  }
}

Bootstrap Command

presetter bootstrap
Next Steps:
  1. Run the installation command above
  2. Create the presetter.config.ts file
  3. Run presetter bootstrap
  4. Start developing with your configured tooling!

Getting Started Tutorials​

🚀 New Project Setup​

Time: 3-5 minutes | Level: Beginner

Complete walkthrough for starting a new TypeScript project with Presetter from scratch. Perfect for developers new to Presetter who want to get up and running quickly.

What you'll learn:

  • Installing and configuring Presetter
  • Understanding preset selection
  • Setting up your development workflow
  • Testing and building your project

🔄 Migrating Existing Projects​

Time: 15-30 minutes | Level: Intermediate

Step-by-step guide to convert existing projects to use Presetter configurations while preserving your custom settings and maintaining compatibility.

What you'll learn:

  • Assessment and backup strategies
  • Configuration migration patterns
  • Handling dependencies and scripts
  • Troubleshooting common issues

Project Type Tutorials​

🏢 Monorepo Setup​

Time: 30-45 minutes | Level: Advanced

Configure a multi-package workspace with shared Presetter configurations. Learn to manage complex projects with multiple packages and cross-dependencies.

What you'll learn:

  • Workspace configuration with pnpm
  • Shared vs. package-specific configurations
  • Build orchestration and dependency management
  • Cross-package development workflows

🎨 Creating Custom Presets​

Time: 2-4 hours | Level: Advanced

Build your own Presetter presets for team-specific requirements. Create reusable configurations that encapsulate your organization's standards and best practices.

What you'll learn:

  • Preset architecture and design patterns
  • Configuration factories and templating
  • Testing and publishing presets
  • Advanced features and conditional logic

🤖 Sharing Coding Agent Setup Across Repos​

Time: 30-60 minutes | Level: Advanced

Use a custom preset to share coding-agent instructions, plugins, skills, MCP configuration, and modular template files across repositories without copying the same files repo by repo.

What you'll learn:

  • Encoding coding-agent setup as preset assets
  • Sharing CLAUDE.md-style instructions across repos
  • Standardizing plugins, skills, and MCP definitions
  • Mixing inline config with template-file paths for modular agent setup
  • Keeping a shared baseline with repo-specific overrides

Migration Guides​

🎯 From Create React App​

Time: 2-4 hours | Level: Intermediate

Transform your Create React App project to use Presetter's modern, flexible tooling. Unlock full configuration control and significantly improve build performance.

Benefits:

  • ✅ 5-10x faster builds with Vite
  • ✅ Full TypeScript strict mode
  • ✅ Modern development server with HMR
  • ✅ Complete configuration control

📦 Migration Guide Overview​

Comprehensive guides for migrating from various tools and setups:

  • Create React App → Modern Vite + Presetter setup
  • Vite → Enhanced tooling with Presetter ecosystem
  • Manual configurations → Managed Presetter workflow

⚡ Presetter Command Helper

Generate the right Presetter command for your needs:

Description:

Initialize Presetter configuration and generate all config files

🎯 Generated Command

pnpm exec presetter bootstrap

💡 More Examples

presetter bootstrap
presetter bootstrap --force  # Overwrite existing files
📚 Command Reference:
  • bootstrap: Set up initial configuration files
  • run: Execute a single script with optional arguments
  • run-s: Run scripts one after another (sequential)
  • run-p: Run scripts at the same time (parallel)

Interactive Learning Tools​

🔧 Configuration Generator​

Use the interactive tool above to generate custom Presetter configurations based on your project requirements. Perfect for understanding which presets you need.

⚡ Command Helper​

The command helper tool shows you the exact Presetter commands for different scenarios, with examples and explanations.

Tutorial Progression Paths​

🎯 Beginner Path (30 minutes)​

  1. New Project Setup - Get familiar with Presetter basics
  2. Try the Configuration Generator - Understand preset options
  3. Practice with the Command Helper - Learn CLI usage

🚀 Intermediate Path (2-3 hours)​

  1. Existing Project Migration - Apply to real projects
  2. Migration Guides - Framework-specific scenarios
  3. Advanced configuration customization

🎨 Advanced Path (4-6 hours)​

  1. Monorepo Setup - Complex project management
  2. Custom Preset Creation - Build team standards
  3. Sharing Coding Agent Setup Across Repos - Distribute agent standards cleanly

Real-World Examples​

Quick Start Examples​

# React Application
pnpm add -D presetter @presetter/preset-react
presetter bootstrap

# TypeScript Library
pnpm add -D presetter @presetter/preset-essentials @presetter/preset-esm
presetter bootstrap

# Monorepo Workspace
pnpm add -D presetter @presetter/preset-monorepo
presetter bootstrap

Common Use Cases​

🌐 Web Applications​

  • React/Vue single-page applications
  • Static site generators
  • Progressive web apps

📚 Libraries & Packages​

  • NPM packages with TypeScript
  • Component libraries
  • Utility libraries with dual module support

🏢 Enterprise Projects​

  • Multi-package monorepos
  • Shared configuration standards
  • Team development workflows

Getting Help​

🆘 Stuck? Get Support​

📖 Additional Resources​

🤝 Community Examples​

Ready to start? Choose a tutorial that matches your experience level and project needs. Each guide includes working examples, troubleshooting tips, and next steps to help you succeed with Presetter.