or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

assets.mdcli-and-build.mdconfiguration.mdcontainer.mdcontent-collections.mdcontent-loaders.mddev-toolbar.mdenvironment.mdi18n.mdindex.mdintegrations.mdmiddleware.mdserver-actions.mdssr-and-app.mdtransitions.md
tile.json

tessl/npm-astro

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/astro@5.15.x

To install, run

npx @tessl/cli install tessl/npm-astro@5.15.0

index.mddocs/

Astro v5.15.4

Fast, content-focused web framework. Zero JavaScript by default, selective hydration.

Install: npm install astro | Type: TypeScript

Task Decision Trees

Build Website

Task type →
├─ Static content → [Configuration](./configuration.md) + [CLI](./cli-and-build.md)
├─ CMS/API data → [Content Collections](./content-collections.md) + [Loaders](./content-loaders.md)
├─ Server rendering → [SSR](./ssr-and-app.md) + [Middleware](./middleware.md)
├─ Multi-language → [i18n](./i18n.md)
└─ Client interaction → [Transitions](./transitions.md) + [Server Actions](./server-actions.md)

Handle Forms/Input

Input type →
├─ Type-safe server functions → [Server Actions](./server-actions.md) - defineAction()
├─ API endpoints → [SSR](./ssr-and-app.md) - API routes
└─ Auth/validation → [Middleware](./middleware.md) + [Server Actions](./server-actions.md)

Manage Content

Source →
├─ Markdown/MDX → [Content Collections](./content-collections.md) - glob loader
├─ JSON/YAML/TOML → [Loaders](./content-loaders.md) - file loader
├─ External API/CMS → [Loaders](./content-loaders.md) - custom loader
└─ Real-time data → [Content Collections](./content-collections.md) - live collections

Optimize Assets

Asset →
├─ Images → [Assets](./assets.md) - Image component, getImage()
├─ Fonts → [Configuration](./configuration.md) - font providers
└─ Build → [Configuration](./configuration.md) - build settings

Deploy

Target →
├─ Static hosting → output: 'static' in [Configuration](./configuration.md)
├─ Serverless → [Integrations](./integrations.md) - adapters
├─ Edge runtime → [SSR](./ssr-and-app.md) - App class
└─ Custom server → [SSR](./ssr-and-app.md) - NodeApp

Module Reference

Package Exports

ExportAPIsDoc
astroCLI, programmatic APIsCLI
astro/configdefineConfig, image/font servicesConfiguration
astro/appApp (SSR runtime)SSR
astro/app/nodeNodeApp, loadApp, loadManifestSSR
astro/loadersglob, fileLoaders
astro/zodZod (re-export)Content Collections
astro/toolbardefineToolbarAppDev Toolbar
astro/containerexperimental_AstroContainerContainer
astro/env/runtimeenv utilitiesEnvironment
astro/assets/utilsimage utilitiesAssets
astro/middlewarecreateContext, sequenceMiddleware

Virtual Modules

ModuleAPIsDoc
astro:contentgetCollection, getEntry, renderContent Collections
astro:assetsImage, Picture, Font, getImageAssets
astro:actionsdefineAction, actions, errorsServer Actions
astro:middlewaredefineMiddleware, sequenceMiddleware
astro:transitionsClientRouter, slide, fadeTransitions
astro:transitions/clientnavigate, eventsTransitions
astro:i18nlocale URL functionsi18n
astro:env/clientPUBLIC_* varsEnvironment
astro:env/serverall vars, getSecretEnvironment
astro:prefetchprefetchTransitions

Code Templates

Form with Server Action

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
  contact: defineAction({
    accept: 'form',
    input: z.object({ email: z.string().email(), message: z.string() }),
    handler: async (input) => {
      // Process form data
      return { success: true };
    }
  })
};
<form method="POST" action={actions.contact}>
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button>Send</button>
</form>

Protected Route

// src/middleware.ts
import { defineMiddleware, sequence } from 'astro:middleware';

export const onRequest = sequence(
  defineMiddleware(async (context, next) => {
    if (context.url.pathname.startsWith('/admin')) {
      if (!context.cookies.get('session')) return context.redirect('/login');
    }
    return next();
  })
);

Type-Safe Content

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

export const collections = {
  blog: defineCollection({
    type: 'content',
    schema: z.object({
      title: z.string(),
      pubDate: z.date(),
      tags: z.array(z.string())
    })
  })
};

// Usage
import { getCollection } from 'astro:content';
const posts = await getCollection('blog', (p) => !p.data.draft);

SSR Adapter

// Adapter server entry
import { App } from 'astro/app';

const app = new App(manifest);
export default {
  async fetch(request) {
    return app.render(request, {
      clientAddress: request.headers.get('CF-Connecting-IP')
    });
  }
};

Multilingual Site

// astro.config.mjs
export default defineConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'es'],
    routing: { prefixDefaultLocale: false }
  }
});
---
import { getRelativeLocaleUrl } from 'astro:i18n';
const frUrl = getRelativeLocaleUrl('fr', '/about');
---

Quick Reference

Build Output Types

  • Static: output: 'static' → HTML files
  • SSR: output: 'server' + adapter → server bundle
  • Hybrid: SSR + prerender per route

Error Handling

  • Actions: ActionError + isInputError/isActionError guards
  • Middleware: Catch in sequence, return Response
  • Content: LiveCollectionError with .is() guards

Type Safety

// src/env.d.ts
declare namespace App {
  interface Locals { user?: { id: string } }
}

Performance

  • Images: Use Image component with format="webp"
  • Transitions: ClientRouter with fallback="animate"
  • Prefetch: Configure strategy per link
  • Build: compressHTML: true, assetsPrefix for CDN

Security

  • ✓ getSecret() for API keys
  • ✓ Validate inputs with Zod
  • security: { checkOrigin: true }
  • ✓ httpOnly cookies
  • access: 'secret' for env vars

Testing

  • Components: Container API
  • Actions: Call directly with test data
  • Types: astro sync to generate

Integration Flow

  1. Config → Configuration
  2. Routes → File-based (src/pages/)
  3. Content → Content Collections
  4. Style → Scoped by default, :global() for global
  5. Interaction → Server Actions or client: directives
  6. Deploy → Integrations for adapters

Architecture

  • Build: Vite-powered
  • Islands: Selective hydration via client:*
  • Routing: File-based with [params] and [...rest]
  • Rendering: SSR/SSG/hybrid via prerender
  • Extensions: Integration hooks (Integrations)