CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gatsby

Blazing fast modern site generator for React with GraphQL data layer and plugin ecosystem

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

Comprehensive configuration system for Gatsby sites, plugins, build settings, and deployment options through the gatsby-config.js file.

Capabilities

GatsbyConfig Interface

Main configuration object that defines all aspects of a Gatsby site's behavior, plugins, and build settings.

/**
 * Main configuration interface for gatsby-config.js
 */
interface GatsbyConfig {
  /** Site metadata accessible through GraphQL queries */
  siteMetadata?: Record<string, any>;
  /** Array of plugins and their configurations */
  plugins?: PluginRef[];
  /** Experimental feature flags */
  flags?: GatsbyConfigFlags;
  /** Path prefix for the site when deployed to a subdirectory */
  pathPrefix?: string;
  /** Control trailing slash behavior */
  trailingSlash?: "always" | "never" | "ignore";
  /** Asset prefix for CDN hosting */
  assetPrefix?: string;
  /** GraphQL type generation options */
  graphqlTypegen?: boolean | GraphQLTypegenOptions;
  /** Promise polyfill configuration */
  polyfill?: boolean;
  /** Node field mappings for data relationships */
  mapping?: Record<string, string>;
  /** JSX runtime configuration */
  jsxRuntime?: "automatic" | "classic";
  /** JSX import source for automatic runtime */
  jsxImportSource?: string;
  /** Development proxy configuration */
  proxy?: ProxyConfigMap | ProxyConfigArray;
  /** Partytown proxied URLs for third-party scripts */
  partytownProxiedURLs?: string[];
  /** Express middleware for development server */
  developMiddleware?: (app: any) => void;
  /** HTTP headers configuration */
  headers?: HeadersMap;
  /** Deployment adapter configuration */
  adapter?: IAdapterConfig;
}

Usage Examples:

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "My Gatsby Site",
    description: "A blazing fast static site",
    author: "@myusername",
    siteUrl: "https://mysite.com",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "My Gatsby Site",
        short_name: "MyGatsby",
        start_url: "/",
        background_color: "#663399",
        theme_color: "#663399",
        display: "minimal-ui",
        icon: "src/images/gatsby-icon.png",
      },
    },
  ],
  pathPrefix: "/my-app",
  trailingSlash: "never",
  flags: {
    PRESERVE_WEBPACK_CACHE: true,
    FAST_DEV: true,
  },
};

Site Metadata

Structured data accessible throughout the site via GraphQL queries.

/**
 * Site metadata configuration - accessible through GraphQL
 */
interface SiteMetadata extends Record<string, any> {
  /** Site title */
  title?: string;
  /** Site description */
  description?: string;
  /** Site author information */
  author?: string | AuthorObject;
  /** Canonical site URL */
  siteUrl?: string;
  /** Social media links */
  social?: SocialLinks;
  /** Additional custom metadata */
  [key: string]: any;
}

interface AuthorObject {
  name: string;
  email?: string;
  url?: string;
}

interface SocialLinks {
  twitter?: string;
  github?: string;
  linkedin?: string;
  [platform: string]: string | undefined;
}

Plugin Configuration

System for configuring Gatsby plugins with options and ordering.

/**
 * Plugin reference - can be string name or configuration object
 */
type PluginRef = string | IPluginRefObject;

interface IPluginRefObject {
  /** Plugin package name */
  resolve: string;
  /** Plugin configuration options */
  options?: PluginOptions;
  /** Internal plugin identifier */
  __key?: string;
}

interface PluginOptions extends Record<string, any> {
  /** Common plugin options */
  plugins?: PluginRef[];
  [key: string]: any;
}

Usage Examples:

// Different plugin configuration styles
module.exports = {
  plugins: [
    // Simple string reference
    "gatsby-plugin-react-helmet",
    
    // Plugin with options
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "UA-123456789-1",
        head: false,
        anonymize: true,
      },
    },
    
    // Complex plugin with sub-plugins
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [".mdx", ".md"],
        plugins: [
          "gatsby-remark-images",
          "gatsby-remark-prismjs",
        ],
        remarkPlugins: [require("remark-slug")],
      },
    },
  ],
};

Feature Flags

Experimental features and optimizations that can be enabled.

/**
 * Experimental feature flags
 */
interface GatsbyConfigFlags {
  /** Preserve Webpack cache between builds */
  PRESERVE_WEBPACK_CACHE?: boolean;
  /** Enable fast development mode */
  FAST_DEV?: boolean;
  /** Preserve file download cache */
  PRESERVE_FILE_DOWNLOAD_CACHE?: boolean;
  /** Enable parallel data sourcing */
  PARALLEL_SOURCING?: boolean;
  /** Enable fast refresh for React */
  FAST_REFRESH?: boolean;
  /** Additional experimental flags */
  [flag: string]: boolean | undefined;
}

GraphQL Type Generation

Configuration for automatic TypeScript type generation from GraphQL schema.

/**
 * GraphQL type generation configuration
 */
interface GraphQLTypegenOptions {
  /** Output directory for generated types */
  typesOutputPath?: string;
  /** Generate types on every query change */
  generateOnBuild?: boolean;
  /** Include plugin-generated types */
  includeResolvers?: boolean;
}

Proxy Configuration

Development server proxy settings for API requests.

/**
 * Proxy configuration for development server
 */
type ProxyConfigMap = Record<string, string | ProxyConfigObject>;
type ProxyConfigArray = Array<ProxyConfigObject>;

interface ProxyConfigObject {
  /** Proxy target URL */
  target: string;
  /** Enable secure connections */
  secure?: boolean;
  /** Change origin header */
  changeOrigin?: boolean;
  /** Path rewrite rules */
  pathRewrite?: Record<string, string>;
  /** Custom headers */
  headers?: Record<string, string>;
}

Usage Examples:

module.exports = {
  // Simple proxy mapping
  proxy: {
    "/api": "http://localhost:3001",
  },
  
  // Advanced proxy configuration
  proxy: [
    {
      prefix: "/api",
      url: "http://localhost:3001",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    },
  ],
};

Headers Configuration

HTTP headers for routes and static assets.

/**
 * HTTP headers configuration
 */
type HeadersMap = Record<string, Record<string, string>>;

Usage Examples:

module.exports = {
  headers: {
    "/*": [
      {
        key: "X-Frame-Options",
        value: "DENY",
      },
      {
        key: "X-Content-Type-Options", 
        value: "nosniff",
      },
    ],
    "/api/*": [
      {
        key: "Access-Control-Allow-Origin",
        value: "*",
      },
    ],
  },
};

Deployment Adapter Configuration

Configuration for deployment adapters that handle functions, redirects, and platform-specific optimizations.

/**
 * Adapter configuration for deployment platforms
 */
interface IAdapterConfig {
  /** Adapter package name */
  name: string;
  /** Adapter configuration options */
  options?: Record<string, any>;
  /** Image CDN configuration */
  imageCDN?: boolean;
  /** File CDN configuration */
  fileCDN?: boolean;
  /** Functions support */
  supports?: {
    functions?: boolean;
    redirects?: boolean;
    headers?: boolean;
  };
}

Usage Examples:

module.exports = {
  adapter: {
    name: "gatsby-adapter-netlify",
    options: {
      excludeDatastoreFromBundle: true,
      imageCDN: true,
    },
  },
};

Path and Asset Configuration

Path Prefix

Configure site deployment to subdirectories.

/**
 * Path prefix for subdirectory deployment
 * Example: "/my-app" for deployment to https://example.com/my-app/
 */
pathPrefix?: string;

Trailing Slash Behavior

Control URL trailing slash handling.

/**
 * Trailing slash behavior
 * - "always": Add trailing slash to all URLs
 * - "never": Remove trailing slash from all URLs  
 * - "ignore": Leave URLs as-is
 */
trailingSlash?: "always" | "never" | "ignore";

Asset Prefix

Configure CDN or external asset hosting.

/**
 * Asset prefix for CDN hosting
 * Example: "https://cdn.example.com" 
 */
assetPrefix?: string;

Deployment Adapter System

Adapter Configuration

Modern deployment adapter system for various hosting platforms with functions, redirects, and headers support.

/**
 * Deployment adapter configuration
 */
interface IAdapterConfig {
  /** Adapter package name */
  name: string;
  /** Adapter configuration options */
  options?: Record<string, any>;
  /** Image CDN configuration */
  imageCDN?: boolean;
  /** File CDN configuration */
  fileCDN?: boolean;
  /** Platform-specific capabilities */
  supports?: {
    functions?: boolean;
    redirects?: boolean;
    headers?: boolean;
  };
}

/**
 * Adapter initialization function type
 */
type AdapterInit = (options?: object) => IAdapter;

/**
 * Core adapter interface
 */
interface IAdapter {
  name: string;
  cache: Cache;
  config: IAdapterConfig;
  initializeAdapterStore?: () => Promise<void>;
  createRoutes?: (functions?: Array<IFunctionDefinition>) => Promise<RoutesManifest>;
}

Usage Examples:

// gatsby-config.js - Netlify adapter
module.exports = {
  adapter: {
    name: "gatsby-adapter-netlify",
    options: {
      excludeDatastoreFromBundle: true,
      imageCDN: true,
    },
  },
};

// Vercel adapter with functions
module.exports = {
  adapter: {
    name: "gatsby-adapter-vercel",
    options: {
      regions: ["us-east-1"],
      functions: true,
      imageCDN: true,
      fileCDN: false,
    },
  },
};

// Custom adapter configuration  
module.exports = {
  adapter: {
    name: "./adapters/my-custom-adapter",
    options: {
      deploymentTarget: "production",
      customOption: "value",
    },
  },
};

Route Definitions

Type definitions for adapter route handling.

/**
 * Routes manifest for deployment
 */
interface RoutesManifest {
  version: 1;
  routes: Array<IStaticRoute | IFunctionRoute | IRedirectRoute>;
  headers?: HeaderRoutes;
  functions?: FunctionsManifest;
}

/**
 * Static route definition
 */
interface IStaticRoute {
  type: "static";
  route: string;
  filePath: string;
}

/**
 * Function route definition
 */
interface IFunctionRoute {
  type: "function";
  route: string;
  functionId: string;
}

/**
 * Redirect route definition
 */
interface IRedirectRoute {
  type: "redirect";
  route: string;
  redirectTo: string;
  statusCode: number;
}

/**
 * Function definition for serverless deployment
 */
interface IFunctionDefinition {
  functionId: string;
  originalFilePath: string;
  relativeCompiledFilePath: string;
  absoluteCompiledFilePath: string;
  matches: Array<string>;
}

docs

browser-apis.md

components-hooks.md

configuration.md

graphql.md

index.md

node-apis.md

ssr-apis.md

tile.json