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
- Template Branch Management - Manage different versions of templates
- Template Advanced Features - Learn advanced template techniques
- Variables Reference - Complete variable type reference