Getting Started with Templates

Learn to create AgileBuilder templates in 30 minutes

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


What is a Template

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


Creating Your First Template

1. Create the Template Directory

mkdir my-template
cd my-template

2. Set Up the Directory Structure

my-template/
├── agilebuilder.json
├── template/
│   ├── package.json.hbs
│   ├── src/
│   │   └── index.js.hbs
│   └── README.md.hbs
└── hooks/
    └── post-generate.js

3. Create the Template Configuration

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

4. Create Template Files

template/package.json.hbs:

{
  "name": "{{projectName}}",
  "version": "1.0.0",
  "scripts": {
    "dev": "node src/index.js",
    {{#if useTypeScript}}
    "build": "tsc"
    {{/if}}
  }
}

template/src/index.js.hbs:

// Entry point for {{projectName}}
console.log('Welcome to {{projectName}}');

{{#if useTypeScript}}
// TypeScript enabled
import type { Project } from './types';
{{/if}}

5. Create a Hook

hooks/post-generate.js:

module.exports = async (context) => {
  const { projectPath, variables } = context
  console.log(`Project created: ${projectPath}`)
  console.log(`Project name: ${variables.projectName}`)
}

Testing Your Template

Local Testing

# Run from the project root
agilebuilder generate ./my-template test-project

Creating from an Existing Project

If you have an existing project, you can quickly create a template:

agilebuilder template create ./my-existing-project --name my-template

AgileBuilder will automatically analyze the project structure and create a basic template.


Template Best Practices

1. Clear Variable Naming

// Good naming
"projectName", "useTypeScript", "packageManager"

// Poor naming
"pname", "ts", "pm"

2. Sensible Defaults

{
  "name": "useEslint",
  "type": "boolean",
  "default": true  // Most projects need ESLint
}

3. Detailed Descriptions

{
  "name": "apiBaseUrl",
  "type": "string",
  "description": "API base URL for configuring dev and production environments"
}

Next Steps