# Complete Getting Started Guide
**Build a real Aurelia application in 15 minutes.** This hands-on guide shows you why developers choose Aurelia for its performance, simplicity, and standards-based approach. No prior Aurelia experience required.
## What You'll Discover
Build a polished task management app while experiencing Aurelia's key advantages:
* **🚀 Instant two-way data binding** - no boilerplate code required
* **⚡ Blazing fast rendering** - direct DOM updates, no virtual DOM overhead
* **🎯 Intuitive component model** - clean, testable architecture
* **🛠️ Modern TypeScript development** - with built-in dependency injection
**The result?** A production-quality app with clean, maintainable code in just 15 minutes.
## Prerequisites
You'll need:
* **Node.js 18+ (recommended latest LTS)** ([Download here](https://nodejs.org/))
* **A code editor** ([VS Code](https://code.visualstudio.com/) recommended)
* **Basic knowledge** of HTML, CSS, and JavaScript
## Quick Try (No Installation)
Want to see Aurelia in action immediately? Copy this into an HTML file:
```html
Aurelia 2 Demo
```
Open it in your browser and start typing! This demonstrates Aurelia's automatic two-way data binding.
## Create Your First Project
### Step 1: Initialize Project
Create a new project using the makes command:
```bash
npx makes aurelia
```
When prompted:
* **Project name**: `my-task-app`
* Choose **TypeScript** or **JavaScript** template (TypeScript recommended)
* **Install dependencies**: `Yes`
```bash
cd my-task-app
npm run dev
```
Your app opens at `http://localhost:9000` showing "Hello World!"
### Step 2: Project Structure
Your new project contains:
```
my-task-app/
├── src/
│ ├── main.ts # Application entry point
│ ├── my-app.html # Root component template
│ ├── my-app.ts # Root component logic
│ └── my-app.css # Component styles
├── index.html # Main HTML file
├── vite.config.js # Vite configuration
└── package.json # Dependencies and scripts
```
**Key files to understand:**
* **`main.ts`**: Starts your Aurelia application
* **`my-app.ts`**: Your root component's logic (TypeScript)
* **`my-app.html`**: Your root component's template (HTML)
## Understanding Aurelia Components
Aurelia apps are built with **components**. Each component has two parts:
### View-Model (Logic)
**`src/my-app.ts`**:
```typescript
export class MyApp {
message = 'Hello World!';
// Methods and properties go here
}
```
### View (Template)
**`src/my-app.html`**:
```html
${message}
```
The `${}` syntax binds data from your view-model to the template. When `message` changes, the `
` automatically updates!
## Build Your Task App
Let's transform the hello world app into a task manager. We'll build it step by step.
### Step 3: Update the Template
Replace contents of **`src/my-app.html`**:
```html
My Task Manager
${tasks.length} task${tasks.length === 1 ? '' : 's'} total
```
Show or hide elements based on conditions.
### 4. **List Rendering**
```html
${task.text}
```
Display dynamic lists that update automatically.
### 5. **Computed Properties**
```typescript
get completedTaskCount(): number {
return this.tasks.filter(task => task.completed).length;
}
```
Derived values that update automatically when dependencies change.
## Next Steps
Congratulations! You've built a real Aurelia application. Here's what to explore next:
### Immediate Next Steps
* [**Components Guide**](https://docs.aurelia.io/components/components) - Create reusable components
* [**Templates Deep Dive**](https://docs.aurelia.io/templates/overview) - Master Aurelia's templating
* [**Dependency Injection**](https://docs.aurelia.io/getting-to-know-aurelia/services-and-runtime-hooks/dependency-injection) - Manage services and data
### Building Real Apps
* [**Router**](https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/fundamentals/getting-started) - Add navigation between pages
* [**Forms**](https://docs.aurelia.io/templates/forms/forms-1) - Handle complex user input
* [**HTTP Client**](https://docs.aurelia.io/aurelia-packages/overview) - Connect to APIs
### Development Workflow
* [**Build Tools**](https://docs.aurelia.io/developer-guides/bundlers) - Optimize your development setup
* [**Testing**](https://docs.aurelia.io/developer-guides/overview) - Test your applications
* [**Debugging**](https://docs.aurelia.io/developer-guides/debugging-and-troubleshooting) - Debug effectively
## Common Questions
### **"Should I use TypeScript or JavaScript?"**
TypeScript is recommended for better development experience, error catching, and IntelliSense. But JavaScript works perfectly fine too.
### **"How does this compare to React/Vue/Angular?"**
Aurelia focuses on standards-based development with minimal learning curve. If you know HTML, CSS, and JavaScript, you already know most of Aurelia.
### **"Can I use this in production?"**
Absolutely! Aurelia 2 is production-ready and used by companies worldwide. The framework is stable, performant, and well-tested.
### **"What if I get stuck?"**
* [**Documentation**](https://docs.aurelia.io/readme) - Comprehensive guides and API docs
* [**GitHub Discussions**](https://github.com/aurelia/aurelia/discussions) - Community Q\&A
* [**Discord**](https://discord.gg/RBtyM6u) - Real-time chat with the community
## You're Ready!
You now understand Aurelia's core concepts and have built a working application. The framework's strength lies in its simplicity - what you just learned covers 80% of what you'll use in real applications.
Ready to build something amazing? Dive into the guides above or start building your next project with Aurelia!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.aurelia.io/getting-started/complete-guide.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.