Comprehensive configuration system for Gatsby sites, plugins, build settings, and deployment options through the gatsby-config.js file.
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,
},
};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;
}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")],
},
},
],
};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;
}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;
}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": "",
},
},
],
};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: "*",
},
],
},
};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,
},
},
};Configure site deployment to subdirectories.
/**
* Path prefix for subdirectory deployment
* Example: "/my-app" for deployment to https://example.com/my-app/
*/
pathPrefix?: string;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";Configure CDN or external asset hosting.
/**
* Asset prefix for CDN hosting
* Example: "https://cdn.example.com"
*/
assetPrefix?: string;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",
},
},
};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>;
}