> ## Documentation Index
> Fetch the complete documentation index at: https://aerojs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Scaffold your first Aero project and have a site running in minutes.

The fastest way to start is with `@aero-js/create`, which scaffolds a project, installs dependencies, and prints next steps.

<Steps>
  <Step title="Scaffold a project">
    Run the create command with your project name:

    <CodeGroup>
      ```bash pnpm theme={"theme":"github-dark-default"}
      pnpm create @aero-js my-app
      ```

      ```bash pnpm dlx theme={"theme":"github-dark-default"}
      pnpm dlx @aero-js/create@latest my-app
      ```

      ```bash npm theme={"theme":"github-dark-default"}
      npx @aero-js/create@latest my-app
      ```

      ```bash yarn theme={"theme":"github-dark-default"}
      yarn create @aero-js my-app
      ```
    </CodeGroup>

    This copies the minimal template into `my-app/`, rewrites `package.json` with your project name, and installs dependencies.

    <Tip>
      To scaffold with Nitro pre-configured for API routes and server deployment, add `--template fullstack`:

      ```bash theme={"theme":"github-dark-default"}
      pnpm create @aero-js my-app --template fullstack
      ```

      The fullstack template adds Nitro, a root `nitro.config.ts`, and a `preview:api` command (with `aero.config.ts` using `@aero-js/core/config`).
    </Tip>
  </Step>

  <Step title="Start the dev server">
    ```bash theme={"theme":"github-dark-default"}
    cd my-app
    pnpm dev
    ```

    Open `http://localhost:5173` to see your site. Vite's HMR keeps HTML, CSS, content, and client scripts in sync as you edit.
  </Step>

  <Step title="Create your first page">
    Every `.html` file in `client/pages/` becomes a route. Create `client/pages/about.html`:

    ```html about.html theme={"theme":"github-dark-default"}
    <h1>About</h1>
    <p>This is a new page.</p>
    ```

    Visit `http://localhost:5173/about` — no routing config needed.

    To add a layout, import it in a `<script is:build>` block and wrap your content:

    ```html pages/about.html theme={"theme":"github-dark-default"}
    <script is:build>
      import base from '@layouts/base.html'
    </script>

    <base-layout>
      <h1>About</h1>
      <p>This is a new page.</p>
    </base-layout>
    ```

    The layout's `<slot />` is replaced with your page content at build time.
  </Step>

  <Step title="Build for production">
    ```bash theme={"theme":"github-dark-default"}
    pnpm build
    ```

    This produces a static `dist/` folder. Deploy it to any static host.

    To preview the build locally:

    <Tabs>
      <Tab title="Static preview">
        ```bash theme={"theme":"github-dark-default"}
        pnpm preview
        ```
      </Tab>

      <Tab title="Fullstack preview (Nitro)">
        ```bash theme={"theme":"github-dark-default"}
        pnpm preview:api
        ```

        Serves both the static files and API routes from one origin. Available in the fullstack template or when `server: true` is set.
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Commands reference

| Command            | Description                                  |
| ------------------ | -------------------------------------------- |
| `pnpm dev`         | Start the dev server with HMR                |
| `pnpm build`       | Build to `dist/` (and `.output/` with Nitro) |
| `pnpm preview`     | Preview the static build                     |
| `pnpm preview:api` | Preview static + API from one origin (Nitro) |

## Next steps

<CardGroup cols={2}>
  <Card title="Project structure" icon="folder-open" href="/getting-started/structure">
    Understand how your scaffolded project is organized.
  </Card>

  <Card title="Configuration" icon="settings-2" href="/getting-started/configuration">
    Configure the Aero Vite plugin and project options.
  </Card>
</CardGroup>