Strapper Documentation

Welcome to Strapper - the ultimate project template ecosystem for developers. Learn how to use the Bootstrapper VS Code extension and community blueprints to jumpstart your development projects.

🚀 Getting Started

Strapper is a comprehensive project template ecosystem that helps developers quickly scaffold new projects using pre-built blueprints. The system consists of:

• Bootstrapper VS Code Extension - The main tool for creating and managing blueprints
• Community Blueprint Repository - A collection of community-contributed project templates
• Strapper Website - A searchable interface for discovering blueprints

💾 Installation

Install the Bootstrapper Extension

1. Open VS Code (or any VS Code-based editor like Cursor, WindSurf, etc.)
2. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Bootstrapper" by Strapperorg
4. Click Install
5. Reload VS Code if prompted

Verify Installation

After installation, you should see the following commands in the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• Bootstrapper: Create from Blueprint
• Bootstrapper: Save as Blueprint
• Bootstrapper: Manage Blueprints
• Bootstrapper: Browse Community Blueprints

📝 Using Blueprints

Creating Projects from Blueprints

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run Bootstrapper: Create from Blueprint
3. Choose from your local blueprints or browse community blueprints
4. Select a target directory for your new project
5. Enter a project name
6. Your project will be generated with all files and folders from the blueprint

Saving Projects as Blueprints

1. Right-click on any folder in the VS Code Explorer
2. Select Save as Blueprint from the context menu
3. Enter blueprint details:
   • Name: A descriptive name for your blueprint
   • Description: What this blueprint creates
   • Tags: Keywords to help categorize the blueprint
4. The blueprint will be saved to your local collection

Managing Your Blueprints

Use Bootstrapper: Manage Blueprints to:

• View all your local blueprints
• Create new projects from blueprints
• Edit blueprint metadata (name, description, tags)
• Duplicate existing blueprints
• Export blueprints for sharing
• Delete unwanted blueprints
• Browse and download community blueprints

Community Blueprints

Access a vast collection of community-contributed blueprints:

Via VS Code Extension

1. Run Bootstrapper: Browse Community Blueprints
2. Browse available blueprints from the GitHub repository
3. View README documentation for detailed information
4. Download blueprints to your local collection
5. Use downloaded blueprints like any local blueprint

Via Strapper Website

1. Visit strapper.org
2. Search and filter blueprints by technology, type, or purpose
3. View detailed documentation and examples
4. Download or copy blueprint information

🤝 Contributing Blueprints

Share your project templates with the community! Here's how to contribute:

Repository Structure

Each blueprint should be in its own folder in the root of the blueprints repository:

Strapperorg/blueprints/
├── your-blueprint-name/
│   ├── blueprint.json       # Required: Blueprint definition
│   └── README.md           # Recommended: Documentation
├── another-blueprint/
│   ├── blueprint.json
│   └── README.md
└── ...

Contribution Steps

1. Fork the repository at github.com/Strapperorg/blueprints
2. Create a new folder in the root with a descriptive kebab-case name
3. Add blueprint.json with your blueprint definition
4. Add README.md with documentation and usage instructions
5. Test your blueprint using the Bootstrapper extension
6. Submit a pull request with a clear description

README.md Requirements

The meta section must be the first thing in your README.md file:

<!--
title: Your Blueprint Name
description: Brief description of what this blueprint creates
tags: technology, framework, type, purpose
-->

Meta Fields Explained:

• title: The display name for your blueprint (should match blueprint.json name)
• description: A concise explanation of what this blueprint generates
• tags: Comma-separated keywords for search and categorization

Blueprint Guidelines

• Use descriptive, specific names (e.g., "react-typescript-app" not "web-app")
• Include comprehensive documentation in README.md
• Add the required HTML meta section at the top of README.md
• Add appropriate tags for discoverability
• Test that the generated project works correctly
• Follow naming conventions (kebab-case for folders)
• Include necessary configuration files (.gitignore, package.json, etc.)

📐 Blueprint Format

Blueprints are defined using a JSON format that specifies files, folders, and metadata:

{
  "name": "React TypeScript App",
  "description": "A modern React application with TypeScript and Vite",
  "tags": ["react", "typescript", "vite", "frontend"],
  "files": {
    "package.json": "{\n  \"name\": \"{{PROJECT_NAME}}\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"dev\": \"vite\"\n  }\n}",
    "src/App.tsx": "import React from 'react';\n\nfunction App() {\n  return (\n    <div>\n      <h1>Welcome to {{PROJECT_NAME}}</h1>\n    </div>\n  );\n}\n\nexport default App;",
    "README.md": "# {{PROJECT_NAME}}\n\nGenerated on {{DATE}}\n\n## Getting Started\n\n```bash\nnpm install\nnpm run dev\n```"
  },
  "folders": ["src", "public", "tests"]
}

Required Fields

• name: Human-readable blueprint name
• files: Object mapping file paths to content

Optional Fields

• description: Brief description of what the blueprint creates
• tags: Array of keywords for categorization
• folders: Array of empty directories to create

🔧 Template Variables

Use template variables in your file content for dynamic replacement when projects are created:

{{PROJECT_NAME}}         - Project name as entered by user
{{PROJECT_NAME_UPPER}}   - UPPERCASE version
{{PROJECT_NAME_LOWER}}   - lowercase version
{{PROJECT_NAME_CAMEL}}   - camelCase version
{{PROJECT_NAME_PASCAL}}  - PascalCase version
{{DATE}}                 - Current date (YYYY-MM-DD)
{{YEAR}}                 - Current year

Example Usage

{
  "files": {
    "package.json": "{\n  \"name\": \"{{PROJECT_NAME_LOWER}}\",\n  \"version\": \"1.0.0\"\n}",
    "src/{{PROJECT_NAME_PASCAL}}.js": "class {{PROJECT_NAME_PASCAL}} {\n  constructor() {\n    console.log('{{PROJECT_NAME}} created on {{DATE}}');\n  }\n}"
  }
}

⚙️ Configuration

Customize the Bootstrapper extension behavior through VS Code settings:

Available Settings

• bootstrapper.blueprintsPath
  • Custom path for storing blueprints
  • Default: Extension storage location
  • Type: String
• bootstrapper.includeGitIgnore
  • Include .gitignore file when creating blueprints
  • Default: true
  • Type: Boolean
• bootstrapper.excludePatterns
  • File and folder patterns to exclude when creating blueprints
  • Default: ["node_modules", ".git", "dist", "build", ".DS_Store"]
  • Type: Array of strings
• bootstrapper.communityRepository
  • GitHub repository for community blueprints
  • Default: "Strapperorg/blueprints"
  • Format: "owner/repo"
  • Type: String

Accessing Settings

1. Open VS Code Settings (Ctrl+, / Cmd+,)
2. Search for "bootstrapper"
3. Modify settings as needed
4. Changes take effect immediately

🆘 Support & Troubleshooting

Common Issues

Extension Commands Not Appearing

• Ensure the extension is properly installed and enabled
• Reload VS Code after installation
• Check that you're using VS Code 1.96.0 or higher

Cannot Access Community Blueprints

• Check your internet connection
• Verify the community repository setting
• Try reloading VS Code

Blueprint Creation Fails

• Ensure you have write permissions to the target directory
• Check that the blueprint JSON format is valid
• Verify template variables are properly formatted

Getting Help

Feature Requests

Have an idea for improving Strapper? We welcome feature requests and discussions in our GitHub repositories.

Community

• Browse existing blueprints at strapper.org
• Contribute blueprints to help other developers
• Join discussions on GitHub
• Share your creations with the community