AgileBuilder logoAgileBuilder
Back to docs

Template Tutorial

Create project templates for long-term reuse

This tutorial will guide you through creating a complete project template, including variable definitions, conditional rendering, and hooks configuration.

What is a Template

A template is a directory containing project structure, configuration files, and code. Through variables and conditional rendering, it can generate projects with different configurations.

Template Structure

A standard AgileBuilder template structure:

my-template/
├── agilebuilder.json      # Template configuration
├── template/              # Template files directory
│   ├── src/
│   ├── package.json.hbs   # Using Handlebars syntax
│   └── README.md.hbs
└── hooks/                 # Hook scripts (optional)
    ├── pre-generate.js
    └── post-generate.js

Configuration File

agilebuilder.json is the core configuration:

{
  "name": "my-template",
  "version": "1.0.0",
  "description": "My project template",
  "variables": [
    {
      "name": "projectName",
      "type": "string",
      "description": "Project name",
      "required": true
    },
    {
      "name": "useTypeScript",
      "type": "boolean",
      "description": "Use TypeScript",
      "default": true
    }
  ]
}

Variable System

AgileBuilder supports multiple variable types:

String Variable

{
  "name": "projectName",
  "type": "string",
  "description": "Project name",
  "required": true,
  "pattern": "^[a-z][a-z0-9-]*$"
}

Boolean Variable

{
  "name": "useTypeScript",
  "type": "boolean",
  "description": "Use TypeScript",
  "default": true
}

Select Variable

{
  "name": "framework",
  "type": "select",
  "description": "Select framework",
  "options": ["react", "vue", "svelte"],
  "default": "react"
}

Conditional Rendering

Use Handlebars syntax in template files:

{{#if useTypeScript}}
"devDependencies": {
  "typescript": "^5.0.0"
}
{{/if}}

Next Steps