Astro

https://github.com/withastro/astro
Admin
Astro is a website build tool for the modern web, offering a powerful developer experience and...
Tokens:789,399
Snippets:2,457
Trust Score:8.5
License:MIT
Update:4 hours ago
Show doc for...
Tokens:
Raw
### Create Astro project from official example

Source: https://github.com/withastro/astro/blob/main/examples/README.md

Scaffolds a new Astro project from an official example template. Replace [EXAMPLE_NAME] with the name of the example directory.

```sh
npm create astro@latest -- --template [EXAMPLE_NAME]
```

--------------------------------

### Create a new Astro blog project

Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md

Use this command to scaffold a new Astro project with the blog template. Run it in your terminal to get started.

```sh
npm create astro@latest -- --template blog
```

--------------------------------

### Install Astro with npm create astro@latest

Source: https://github.com/withastro/astro/blob/main/README.md

Recommended way to install the latest version of Astro.

```bash
npm create astro@latest
```

--------------------------------

### Clone and install dependencies

Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies with pnpm, and build the project. Run pnpm install from the top-level directory because Astro uses pnpm workspaces.

```shell
git clone && cd ...
pnpm install
pnpm run build
```

--------------------------------

### Run Example Project: pnpm --filter @example/minimal run dev

Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md

Runs the minimal example from the `/examples` folder, which is linked to the local Astro source code, to test changes during development.

```shell
pnpm --filter @example/minimal run dev
```

--------------------------------

### Create a new Astro portfolio project

Source: https://github.com/withastro/astro/blob/main/examples/portfolio/README.md

Run this command in your terminal to scaffold a new Astro project using the portfolio template. This is the recommended way to get started with the starter kit.

```sh
npm create astro@latest -- --template portfolio
```

--------------------------------

### plugin-pages: Example pages folder structure

Source: https://github.com/withastro/astro/blob/main/packages/astro/src/core/build/plugins/README.md

Example pages/ folder structure used to illustrate the emitted entry points. It includes .astro and .md files in a nested blog folder.

```text
├── blog
│   ├── first.astro
│   └── post.astro
├── first.astro
├── index.astro
├── issue.md
└── second.astro
```

--------------------------------

### Create Astro project from community example

Source: https://github.com/withastro/astro/blob/main/examples/README.md

Scaffolds a new Astro project from a community example hosted in a GitHub repository. Replace [GITHUB_USER] and [REPO_NAME] with the appropriate values.

```sh
npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]
```

--------------------------------

### Project structure for with-markdoc example

Source: https://github.com/withastro/astro/blob/main/examples/with-markdoc/README.md

Shows the project structure of the with-markdoc example. Markdoc (.mdoc) files live in src/content/docs/ and Astro components can be rendered from Markdoc files using tags, as configured in markdoc.config.mjs.

```text
/
├── public/
├── src/
│   └── content/
        └── docs/
│           └── intro.mdoc
|       └── config.ts
│   └── components/Aside.astro
│   └── layouts/Layout.astro
│   └── pages/index.astro
|   └── env.d.ts
├── astro.config.mjs
├── markdoc.config.mjs
├── README.md
├── package.json
└── tsconfig.json

```

--------------------------------

### Install dependencies and build the monorepo

Source: https://github.com/withastro/astro/blob/main/packages/language-tools/CONTRIBUTING.md

Run these commands after cloning the repository to install dependencies and perform an initial build. Requires pnpm and Turbo.

```shell
pnpm install
pnpm build
```

--------------------------------

### Install @rolldown/plugin-babel and @babel/core

Source: https://github.com/withastro/astro/blob/main/packages/integrations/react/README.md

Install the Babel plugin and core packages to migrate custom Babel transforms.

```sh
pnpm add -D @rolldown/plugin-babel @babel/core
```

--------------------------------

### Install Astro manually with npm install astro

Source: https://github.com/withastro/astro/blob/main/README.md

Alternative manual installation method for Astro.

```bash
npm install astro
```

--------------------------------

### Run create-astro with pnpm

Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md

Starts the interactive scaffolding process for a new Astro project using pnpm.

```bash
pnpm create astro
```

--------------------------------

### Install agent-browser Globally

Source: https://github.com/withastro/astro/blob/main/AGENTS.md

Installs agent-browser globally and its dependencies. Required if agent-browser is not available on the machine.

```bash
npm install -g agent-browser && agent-browser install
```

--------------------------------

### Create Astro project from nested community example

Source: https://github.com/withastro/astro/blob/main/examples/README.md

Scaffolds a new Astro project from a community example located in a subdirectory of a GitHub repository. Replace [GITHUB_USER], [REPO_NAME], and path/to/example with the appropriate values.

```sh
npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
```

--------------------------------

### Install Astro with npm create astro@latest

Source: https://github.com/withastro/astro/blob/main/packages/astro/README.md

Recommended way to create a new Astro project. Run this command in your terminal.

```bash
# Recommended!
npm create astro@latest
```

--------------------------------

### Rinfo program example

Source: https://github.com/withastro/astro/blob/main/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/index.md

A sample program in the 'rinfo' language, demonstrating area assignment, robot initialization, and reporting position.

```rinfo
programa Rinfo
areas
  ciuadad: AreaC(1,1,100,100)
robots
  robot robot1
  comenzar
    Informar(PosAv, PosCa)
  fin
variables
  Rinfo: robot1
comenzar
  AsignarArea(Rinfo, ciudad)
  Iniciar(Rinfo, 1, 1)
fin
```

--------------------------------

### Run create-astro with yarn

Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md

Starts the interactive scaffolding process for a new Astro project using yarn.

```bash
yarn create astro
```

--------------------------------

### Run a single test file (example)

Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md

Runs the specific test file `test/astro-basic.test.js` using Node.js's test runner.

```shell
node --test test/astro-basic.test.js
```

--------------------------------

### Using getRssString() in an Astro page

Source: https://github.com/withastro/astro/blob/main/packages/astro-rss/README.md

Use getRssString() to get the RSS string directly and return it in a custom Response. The example is from src/pages/rss.xml.js and imports getRssString from '@astrojs/rss'.

```ts
// src/pages/rss.xml.js
import { getRssString } from '@astrojs/rss';

export async function GET(context) {
  const rssString = await getRssString({
    title: 'Buzz’s Blog',
    ...
  });

  return new Response(rssString, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}
```

--------------------------------

### Create a new Astro project with the basics template

Source: https://github.com/withastro/astro/blob/main/examples/basics/README.md

Use this command to scaffold a new Astro project using the 'basics' template. Run it in your terminal.

```sh
npm create astro@latest -- --template basics
```

--------------------------------

### Project structure overview

Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md

Shows the folder and file layout of the Astro blog starter kit. The src/pages directory contains .astro and .md files that become routes, and src/content holds Markdown/MDX collections.

```text
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
```

--------------------------------

### Create a new component package with npm create astro

Source: https://github.com/withastro/astro/blob/main/examples/component/README.md

Use this command to scaffold a new Astro component library project using the 'component' template. Run it in your terminal to get started.

```sh
npm create astro@latest -- --template component
```

--------------------------------

### Project structure tree

Source: https://github.com/withastro/astro/blob/main/examples/integration/README.md

The files and folders created by this starter kit. The index.ts file is the entry point for your integration, where you export your integration to make it importable from your package.

```text
/
├── index.ts
├── tsconfig.json
├── package.json

```

--------------------------------

### Common npm commands for Astro

Source: https://github.com/withastro/astro/blob/main/examples/blog/README.md

A table of npm commands used to manage the Astro project. Run these from the project root to install dependencies, start the dev server, build, preview, and use the Astro CLI.

```sh
npm install
```

```sh
npm run dev
```

```sh
npm run build
```

```sh
npm run preview
```

```sh
npm run astro ...
```

```sh
npm run astro -- --help
```

--------------------------------

### Install Astro manually with npm install astro

Source: https://github.com/withastro/astro/blob/main/packages/astro/README.md

Manual installation of the Astro package. Use this if you prefer to set up your project manually.

```bash
# Manual:
npm install astro
```

--------------------------------

### Enter prerelease mode

Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md

Run this command in the project root to enter prerelease mode. Then update .changeset/config.json with baseBranch next and create a PR.

```shell
pnpm exec changeset pre enter next
```

--------------------------------

### Install @astrojs/ts-plugin

Source: https://github.com/withastro/astro/blob/main/packages/language-tools/ts-plugin/README.md

Install the TypeScript plugin as a development dependency.

```bash
npm install --save-dev @astrojs/ts-plugin
```

--------------------------------

### Create Astro project with nanostores template

Source: https://github.com/withastro/astro/blob/main/examples/with-nanostores/README.md

Scaffolds a new Astro project using the with-nanostores template. Run this command in your terminal to create a project that demonstrates shared state with nanostores.

```sh
npm create astro@latest -- --template with-nanostores
```

--------------------------------

### Create Astro project with template via CLI flags

Source: https://github.com/withastro/astro/blob/main/packages/create-astro/README.md

Shows how to specify a project name and template directly via CLI arguments, bypassing interactive prompts. Includes commands for npm, yarn, and pnpm.

```bash
# npm
npm create astro@latest my-astro-project -- --template minimal
```

```bash
# yarn
yarn create astro my-astro-project --template minimal
```

```bash
# pnpm
pnpm create astro my-astro-project --template minimal
```

--------------------------------

### Install Oxc React Compiler

Source: https://github.com/withastro/astro/blob/main/packages/integrations/react/README.md

Install the optional Oxc compiler as a dev dependency to enable React Compiler support.

```sh
pnpm add -D oxc-transform-react
```

--------------------------------

### Install pnpm merge driver for lockfile conflicts

Source: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md

Installs the pnpm merge driver and configures it to automatically handle merge conflicts in pnpm-lock.yaml.

```shell
pnpm add -g @pnpm/merge-driver
pnpm dlx npm-merge-driver install --driver-name pnpm-merge-driver --driver "pnpm-merge-driver %A %O %B %P" --files pnpm-lock.yaml
```

--------------------------------

### Create a new Astro project with the minimal template

Source: https://github.com/withastro/astro/blob/main/examples/minimal/README.md

Scaffolds a new Astro project using the minimal starter template. Run this command in a terminal to create a project with the minimal structure.

```sh
npm create astro@latest -- --template minimal
```

--------------------------------

### Example HTML5 document output

Source: https://github.com/withastro/astro/blob/main/examples/blog/src/content/blog/markdown-style-guide.md

Example HTML5 document output from the preceding Markdown code block, demonstrating a minimal valid HTML page.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

--------------------------------

### TypeScript twoslash example

Source: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/test/fixtures/mdx-syntax-highlighting/src/pages/index.mdx

A TypeScript example using the `twoslash` fence to enable hover documentation in the editor. The comment instructs users to hover over the function to see its documentation.

```ts
console.log("Hover over the function to see its documentation")

```

--------------------------------

### Start Background Dev Server

Source: https://github.com/withastro/astro/blob/main/AGENTS.md

Starts the Astro dev server in the background using pnpm. Use this to run long-running dev servers without blocking the terminal.

```bash
pnpm -C examples/minimal dev --background
```

--------------------------------

### Upgrade to Beta with NPM

Source: https://github.com/withastro/astro/blob/main/packages/upgrade/README.md

Upgrade project dependencies to the beta version using npx.

```bash
npx @astrojs/upgrade beta
```

--------------------------------

### Create Astro project with MDX template

Source: https://github.com/withastro/astro/blob/main/examples/with-mdx/README.md

Run this command to scaffold a new Astro project using the with-mdx template. It requires npm and will create a project directory with the example files.

```sh
npm create astro@latest -- --template with-mdx
```

--------------------------------

### Example JSDoc comment with @docs, @message, @see, and @description

Source: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/README.md

Concrete example of a JSDoc comment for an error that occurs when a non-Response value is returned from an Astro file. Includes a link to the Response documentation and a description of the error condition.

```js
/**
 * @docs
 * @message Route returned a `returnedValue`. Only a Response can be returned from Astro files.
 * @see
 * - [Response](https://docs.astro.build/en/guides/server-side-rendering/#response)
 * @description
 * Only instances of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) can be returned inside Astro files.
 */
```
Tokens:
Raw