CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-astro

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

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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)
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/astro@5.15.x
Publish Source
CLI
Badge
tessl/npm-astro badge