Template System

What is a Template

A template is the core asset in AgileBuilder. It's a directory containing project structure, configuration files, and code that renders into different project configurations through variables and conditional logic.

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

---

Template Configuration

agilebuilder.json is the core configuration file for a template:

{
  "name": "react-starter",
  "version": "1.0.0",
  "description": "React project starter template",
  "variables": [
    {
      "name": "projectName",
      "type": "string",
      "description": "Project name",
      "required": true
    },
    {
      "name": "useTypeScript",
      "type": "boolean",
      "description": "Use TypeScript",
      "default": true
    }
  ],
  "hooks": {
    "post-generate": [
      "@agilebuilder/install-deps",
      "@agilebuilder/git-init"
    ]
  }
}

---

Variable System

Variable Types

Type	Description	Example
string	String	Project name, package name
boolean	Boolean	Enable/disable features
select	Single choice	Framework selection
multiselect	Multi-choice	Select multiple modules

Variable Definition Examples

{
  "variables": [
    {
      "name": "projectName",
      "type": "string",
      "description": "Project name",
      "required": true,
      "pattern": "^[a-z][a-z0-9-]*$"
    },
    {
      "name": "framework",
      "type": "select",
      "description": "Select framework",
      "options": ["react", "vue", "svelte"],
      "default": "react"
    },
    {
      "name": "features",
      "type": "multiselect",
      "description": "Select features",
      "options": ["eslint", "prettier", "husky", "jest"],
      "default": ["eslint", "prettier"]
    }
  ]
}

---

Conditional Rendering

Use Handlebars syntax for conditional rendering:

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

unless Conditional

{{#unless useJavaScript}}
This project does not use JavaScript
{{/unless}}

---

Loop Rendering

{{#each features}}
- {{this}}
{{/each}}

Rendered output:

- eslint
- prettier
- husky

---

Filename Variables

Variables can also be used in filenames:

template/
├── {{projectName}}/
│   └── index.js
└── src/
    └── {{#if useTypeScript}}index.ts{{else}}index.js{{/if}}

---

Hooks

Hooks let you run automation scripts before and after project generation:

{
  "hooks": {
    "pre-generate": "node hooks/pre-generate.js",
    "post-generate": [
      "@agilebuilder/install-deps",
      "@agilebuilder/git-init",
      "node hooks/custom.js"
    ]
  }
}

---

Template Management Commands

# List all templates
agilebuilder template list

# View template details
agilebuilder template info <template-name>

# Add a template
agilebuilder template add <git-url>

# Create a template
agilebuilder template create <path> --name <template-name>

# Remove a template
agilebuilder template remove <template-name>

---

Next Steps

• Template Getting Started - Create your first template
• Variable Reference - Complete variable type reference
• Handlebars Syntax - Complete Handlebars syntax reference