HomeDiscourseBlogDiscord

Quick start

Get Aurelia running in under 5 minutes with this quick installation guide.

Get Aurelia up and running in 5 minutes or less.

Prerequisites

  • Node.js (latest version recommended)

  • A code editor of your choice

Option 1: Try Aurelia Instantly (No Setup Required)

Want to try Aurelia immediately? Copy this into an HTML file and open it in your browser:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Aurelia 2 Quick Try</title>
    <base href="/" />
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/aurelia@latest/+esm" crossorigin fetchpriority="high">
  </head>
  <body>
    <app-root></app-root>
    <script type="module">
      import { Aurelia, CustomElement } from 'https://cdn.jsdelivr.net/npm/aurelia@latest/+esm';

      const App = CustomElement.define({
        name: 'app-root',
        template: `
          <h1>Hello, \${name}!</h1>
          <input value.bind="name" placeholder="Enter your name">
          <p>You typed: \${name}</p>
        `
      }, class {
        name = 'World';
      });

      new Aurelia()
        .app({ component: App, host: document.querySelector('app-root') })
        .start();
    </script>
  </body>
</html>

No installation required! This uses Aurelia directly from a CDN. Perfect for experimentation or simple projects. For a more complete example, see the realworld-vanilla example which demonstrates a full application with routing.

Option 2: Create Your App

Aurelia uses the Makes scaffolding tool. No global installs required.

npx makes aurelia

When prompted:

  • Project name: Enter your project name

  • Setup: Choose TypeScript (recommended) or ESNext

  • Install dependencies: Select "Yes"

Why TypeScript? Get intellisense, type safety, and better tooling support out of the box.

Run Your App

Navigate to your project and start the development server:

cd your-project-name
npm start

Your browser will automatically open to http://localhost:8080 showing your new Aurelia app.

Verify Everything Works

You should see "Hello World!" displayed in your browser. The development server watches for changes and auto-reloads.

What's Next?

Core Concepts (Optional Reading)

Aurelia is built on familiar web technologies with a few key concepts:

  • Components: Made of view-models (.ts/.js) and views (.html)

  • Conventions: File names and structure follow predictable patterns

  • Dependency Injection: Built-in system for managing services and dependencies

  • Enhanced HTML: Templates use familiar HTML with powerful binding syntax

These concepts become clearer as you build with Aurelia. Start with the tutorial above to see them in action!

PreviousReactivityNextAurelia for new developers

Last updated

Was this helpful?