Astro

Initialization

# No installation required
npm create astro@latest

More at Install Astro with the Automatic CLI.

Installation

npm init --yes
npm i astro

Additional manual steps:

1. Create a package.json file.
2. Create pages at src/pages/<page-file>.
3. Create static assets at public/, e.g.: robots.txt.
4. Create astro.config.mjs file.
5. Create tsconfig.json file.
6. Add the type definitions file at src/env.d.ts.

// astro.config.mjs e.g.:
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({ /* ... */ });

// tsconfig.json e.g.:
{
  "extends": "astro/tsconfigs/base"
}

// env.d.ts e.g.:
/// <reference types="astro/client" />

More at Install Astro manually.

Usage

astro [global-option] <command> [option]

astro build
astro start
astro build
astro preview

# Use with npm scripts
npm run build
npm run start
npm run build
npm run preview

// package.json e.g.:
{
  "scripts": {
    "dev": "astro dev --port <port-number>",
    "start": "astro dev", /* alias */
    "build": "astro build",
    "preview": "astro preview"
  }
}

Global and common options:

• --base <path>
• --config <config-file>
• --open
• --root <root-dir>
• --silent
• --site <url>
• --verbose

Commands:

• add [svelte|react|vue|solid|tailwind|...] (add integrations)
• build
• dev, options:
  • --port <port-number> (3000 by default)
  • --host <host-name>
• preview
• info

More at:

• Configuration Reference.
• CLI Commands.

Configuration

Using Vercel Adapter & SSR

1- Add the adapter, the following command changes astro.config.mjs automatically, but imports serverless instead of static:

npx astro add vercel

2- Use static instead of serverless:

// astro.config.mjs e.g.:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  adapter: vercel(),
  output: 'server'
});

More at @astrojs/vercel.