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

# Installation

> Install Astro and set up your development environment

# Installation

Get started with Astro by installing it in your project. This guide covers both automatic setup with `create-astro` and manual installation.

## Prerequisites

Before installing Astro, ensure you have the following installed on your system:

<CardGroup cols={2}>
  <Card title="Node.js" icon="node-js">
    **Version 22.12.0 or higher** (or version 20.19.1)
  </Card>

  <Card title="Package manager" icon="box">
    npm (v9.6.5+), pnpm (v7.1.0+), or Yarn
  </Card>
</CardGroup>

<Info>
  You can check your Node.js version by running `node -v` in your terminal. If you need to install or update Node.js, visit [nodejs.org](https://nodejs.org/).
</Info>

Astro also supports:

* **Text editor**: We recommend [VS Code](https://code.visualstudio.com/) with the [Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
* **Terminal**: Astro is accessed through its command-line interface (CLI)

## Automatic installation (recommended)

The fastest way to set up a new Astro project is with `create-astro`. This automated CLI tool will scaffold a new project with everything you need to get started.

<Steps>
  <Step title="Run the create-astro command">
    Open your terminal and run the following command using your preferred package manager:

    <CodeGroup>
      ```bash npm theme={null}
      npm create astro@latest
      ```

      ```bash pnpm theme={null}
      pnpm create astro@latest
      ```

      ```bash yarn theme={null}
      yarn create astro
      ```
    </CodeGroup>

    The `create-astro` wizard will guide you through the setup process.
  </Step>

  <Step title="Choose your project options">
    The CLI will ask you several questions:

    * **Where would you like to create your new project?** - Enter a directory name (e.g., `my-astro-site`)
    * **How would you like to setup your new project?** - Choose a template or start from scratch
    * **Install dependencies?** - Recommended: Yes
    * **Initialize a git repository?** - Recommended: Yes
    * **Add integrations?** - Optional: Select any you want to add now

    <Tip>
      You can skip all prompts and use defaults by adding the `--yes` flag:

      ```bash theme={null}
      npm create astro@latest -- --yes
      ```
    </Tip>
  </Step>

  <Step title="Navigate to your project">
    Once the installation is complete, navigate to your new project directory:

    ```bash theme={null}
    cd my-astro-site
    ```
  </Step>

  <Step title="Start the dev server">
    Start the local development server:

    <CodeGroup>
      ```bash npm theme={null}
      npm run dev
      ```

      ```bash pnpm theme={null}
      pnpm dev
      ```

      ```bash yarn theme={null}
      yarn dev
      ```
    </CodeGroup>

    Astro will start a local development server at `http://localhost:4321`.
  </Step>
</Steps>

## Using a template

You can start with a specific template by using the `--template` flag:

<CodeGroup>
  ```bash Minimal template theme={null}
  npm create astro@latest my-astro-site -- --template minimal
  ```

  ```bash Blog template theme={null}
  npm create astro@latest my-blog -- --template blog
  ```

  ```bash Portfolio template theme={null}
  npm create astro@latest my-portfolio -- --template portfolio
  ```

  ```bash Documentation template theme={null}
  npm create astro@latest my-docs -- --template starlight
  ```
</CodeGroup>

<Info>
  Browse all official templates at [astro.new](https://astro.new) or view the [examples directory](https://github.com/withastro/astro/tree/main/examples) on GitHub.
</Info>

### Using a GitHub repository

You can also use any public GitHub repository as a template:

```bash theme={null}
npm create astro@latest my-astro-site -- --template username/repo
```

## Manual installation

If you prefer to set up Astro manually in an existing project, follow these steps:

<Steps>
  <Step title="Install Astro">
    Install the `astro` package using your package manager:

    <CodeGroup>
      ```bash npm theme={null}
      npm install astro
      ```

      ```bash pnpm theme={null}
      pnpm add astro
      ```

      ```bash yarn theme={null}
      yarn add astro
      ```
    </CodeGroup>
  </Step>

  <Step title="Create your first page">
    Create a `src/pages` directory and add an `index.astro` file:

    ```astro src/pages/index.astro theme={null}
    ---
    // Component frontmatter (JavaScript)
    const pageTitle = "My Astro Site";
    ---

    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
      </head>
      <body>
        <h1>Welcome to Astro!</h1>
      </body>
    </html>
    ```
  </Step>

  <Step title="Create the public directory">
    Create a `public/` directory at the root of your project for static assets like images and fonts.
  </Step>

  <Step title="Create astro.config.mjs">
    Create an Astro configuration file at the root of your project:

    ```javascript astro.config.mjs theme={null}
    // @ts-check
    import { defineConfig } from 'astro/config';

    // https://astro.build/config
    export default defineConfig({});
    ```
  </Step>

  <Step title="Create tsconfig.json">
    Create a TypeScript configuration file (even if you're not using TypeScript):

    ```json tsconfig.json theme={null}
    {
      "extends": "astro/tsconfigs/base"
    }
    ```
  </Step>

  <Step title="Update package.json scripts">
    Add the following scripts to your `package.json`:

    ```json package.json theme={null}
    {
      "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
        "astro": "astro"
      }
    }
    ```
  </Step>
</Steps>

## CLI flags

Customize your installation with these flags:

<ParamField path="--template" type="string">
  Specify a template to use (e.g., `minimal`, `blog`, `portfolio`)
</ParamField>

<ParamField path="--install" type="boolean">
  Automatically install dependencies
</ParamField>

<ParamField path="--no-install" type="boolean">
  Skip dependency installation
</ParamField>

<ParamField path="--git" type="boolean">
  Initialize a git repository
</ParamField>

<ParamField path="--no-git" type="boolean">
  Skip git initialization
</ParamField>

<ParamField path="--add" type="string">
  Add integrations (e.g., `--add react,tailwind`)
</ParamField>

<ParamField path="--yes" type="boolean">
  Skip all prompts by accepting defaults
</ParamField>

<ParamField path="--no" type="boolean">
  Skip all prompts by declining defaults
</ParamField>

<ParamField path="--dry-run" type="boolean">
  Walk through steps without executing
</ParamField>

### Example with flags

```bash theme={null}
npm create astro@latest my-astro-site -- \
  --template minimal \
  --install \
  --git \
  --add tailwind
```

## Editor setup

For the best development experience, we recommend:

### VS Code

Install the official [Astro VS Code extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) for:

* Syntax highlighting for `.astro` files
* TypeScript type information
* VS Code IntelliSense for code completion and hints

### Other editors

* **JetBrains IDEs**: Install the [Astro plugin](https://plugins.jetbrains.com/plugin/20959-astro)
* **Vim/Neovim**: Install [astro-vim](https://github.com/wuelnerdotexe/vim-astro)
* **Sublime Text**: Install [Astro syntax highlighting](https://github.com/withastro/language-tools/tree/main/packages/astro-sublime)

## Next steps

Now that you have Astro installed, you're ready to start building!

<CardGroup cols={2}>
  <Card title="Quick start tutorial" icon="rocket" href="/quickstart">
    Follow our step-by-step tutorial to build your first Astro site
  </Card>

  <Card title="Core concepts" icon="folder" href="/concepts/islands">
    Learn about the Astro core concepts
  </Card>
</CardGroup>