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

configuration.mddocs/

Configuration

Type-safe project setup: image services, font providers, environment variables, and build options.

Core APIs

Define Config

function defineConfig<TLocales = never, TDriver = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>;
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  base: '/docs',
  output: 'static',
  trailingSlash: 'never',
  integrations: [],
  vite: { build: { cssMinify: 'lightningcss' } }
});

Merge Config

function mergeConfig<C>(defaults: C, overrides: DeepPartial<C>): C;
import { mergeConfig, defineConfig } from 'astro/config';

export default defineConfig(
  mergeConfig({ site: 'https://example.com' }, { base: '/blog' })
);

Image Services

Sharp (Node.js)

function sharpImageService(config?: { limitInputPixels?: number | boolean; }): ImageServiceConfig;
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService({ limitInputPixels: 268402689 })
  }
});

Passthrough (no-op)

function passthroughImageService(): ImageServiceConfig;

Font Providers

function fontProviders.google(config?: { display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; }): AstroFontProvider;
function fontProviders.adobe(config: { projectId: string; }): AstroFontProvider;
function fontProviders.bunny(config?: BunnyConfig): AstroFontProvider;
function fontProviders.fontshare(config?: FontshareConfig): AstroFontProvider;
function fontProviders.fontsource(config?: FontsourceConfig): AstroFontProvider;
function defineAstroFontProvider(provider: { entrypoint: string | URL; config?: Record<string, any>; }): AstroFontProvider;
import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  experimental: {
    fonts: [fontProviders.google({ display: 'swap' })]
  }
});

Environment Fields

String Field

function envField.string(options: {
  context: 'client' | 'server';
  access: 'public' | 'secret';
  default?: string;
  optional?: boolean;
  max?: number; min?: number; length?: number;
  url?: boolean;
  includes?: string; startsWith?: string; endsWith?: string;
}): StringField;

Number Field

function envField.number(options: {
  context: 'client' | 'server';
  access: 'public' | 'secret';
  default?: number;
  optional?: boolean;
  max?: number; min?: number; gt?: number; lt?: number;
  int?: boolean;
}): NumberField;

Boolean Field

function envField.boolean(options: {
  context: 'client' | 'server';
  access: 'public' | 'secret';
  default?: boolean;
  optional?: boolean;
}): BooleanField;

Enum Field

function envField.enum<T extends readonly string[]>(options: {
  context: 'client' | 'server';
  access: 'public' | 'secret';
  values: T;
  default?: T[number];
  optional?: boolean;
}): EnumField<T>;
import { defineConfig, envField } from 'astro/config';

export default defineConfig({
  env: {
    schema: {
      API_URL: envField.string({
        context: 'client',
        access: 'public',
        default: 'https://api.example.com'
      }),
      API_KEY: envField.string({
        context: 'server',
        access: 'secret'
      }),
      PORT: envField.number({
        context: 'server',
        access: 'public',
        default: 3000,
        int: true
      }),
      LOG_LEVEL: envField.enum({
        context: 'server',
        access: 'public',
        values: ['debug', 'info', 'warn', 'error'],
        default: 'info'
      })
    }
  }
});

Config Interface

interface AstroUserConfig<TLocales = never, TDriver = never> {
  // Core
  site?: string;
  base?: string;
  trailingSlash?: 'always' | 'never' | 'ignore';
  output?: 'static' | 'server';
  adapter?: AstroAdapter;
  integrations?: AstroIntegration[];

  // Directories
  publicDir?: string;
  srcDir?: string;
  outDir?: string;
  cacheDir?: string;

  // Build
  compressHTML?: boolean;
  build?: {
    format?: 'file' | 'directory' | 'preserve';
    client?: string;
    server?: string;
    serverEntry?: string;
    assets?: string;
    assetsPrefix?: string | Record<string, string>;
    inlineStylesheets?: 'always' | 'auto' | 'never';
  };

  // Server
  server?: {
    host?: string | boolean;
    port?: number;
    headers?: Record<string, string>;
    open?: boolean | string;
  };

  // Assets
  image?: {
    service?: ImageServiceConfig;
    domains?: string[];
    remotePatterns?: RemotePattern[];
  };
  fonts?: {
    providers?: AstroFontProvider[];
  };

  // Routing
  redirects?: Record<string, string | { status: 300 | 301 | 302 | 303 | 304 | 307 | 308; destination: string; }>;
  prefetch?: boolean | PrefetchConfig;

  // i18n
  i18n?: {
    defaultLocale: string;
    locales: TLocales extends never ? Locales : TLocales;
    routing?: {
      prefixDefaultLocale?: boolean;
      redirectToDefaultLocale?: boolean;
      strategy?: 'pathname' | 'pathname-prefix-other-locales' | 'domains';
    };
    fallback?: Record<string, string>;
  };

  // Environment
  env?: {
    schema?: Record<string, EnvFieldType>;
    validateSecrets?: boolean;
  };

  // Security
  security?: {
    checkOrigin?: boolean;
  };

  // Markdown
  markdown?: {
    syntaxHighlight?: 'shiki' | 'prism' | false;
    shikiConfig?: ShikiConfig;
    remarkPlugins?: RemarkPlugins;
    rehypePlugins?: RehypePlugins;
  };

  // Experimental
  experimental?: {
    contentIntellisense?: boolean;
    clientPrerender?: boolean;
    fonts?: AstroFontProvider[];
    csp?: boolean;
  };

  // Vite
  vite?: ViteUserConfig;
}

Templates

Static Site

export default defineConfig({
  site: 'https://example.com',
  output: 'static',
  build: { format: 'directory' }
});

SSR with Adapter

import vercel from '@astrojs/vercel/serverless';

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

Multilingual

export default defineConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'es'],
    routing: { prefixDefaultLocale: false }
  }
});

With CDN

export default defineConfig({
  build: {
    assetsPrefix: 'https://cdn.example.com',
    inlineStylesheets: 'never'
  }
});

Environment Variables

export default defineConfig({
  env: {
    schema: {
      PUBLIC_API_URL: envField.string({
        context: 'client',
        access: 'public',
        url: true
      }),
      DATABASE_URL: envField.string({
        context: 'server',
        access: 'secret'
      })
    },
    validateSecrets: true
  }
});

Troubleshooting

  • Client env vars: Must have context: 'client' and access: 'public'
  • Sharp: Node.js only, use passthrough for edge
  • Font config: Required in experimental.fonts before using Font component

docs

assets.md

cli-and-build.md

configuration.md

container.md

content-collections.md

content-loaders.md

dev-toolbar.md

environment.md

i18n.md

index.md

integrations.md

middleware.md

server-actions.md

ssr-and-app.md

transitions.md

tile.json