tessl/npm-gatsby-cli

Command-line interface for creating, developing, building and managing Gatsby static sites

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Development Server

Name: tessl/npm-gatsby-cli
Author: tessl

Development server operations providing hot reloading, HTTPS support, debugging capabilities, and network access for cross-device testing during Gatsby development.

Capabilities

Start Development Server

Launches the Gatsby development server with hot module replacement and file watching.

/**
 * Start development server with hot reloading and file watching
 * @param options - Development server configuration
 */
gatsby develop [options]

interface DevelopOptions {
  host?: string;                    // -H, --host (default: localhost)
  port?: string;                    // -p, --port (default: 8000 or env.PORT)  
  open?: boolean;                   // -o, --open browser automatically
  https?: boolean;                  // -S, --https enable HTTPS
  certFile?: string;               // -c, --cert-file custom HTTPS certificate
  keyFile?: string;                // -k, --key-file custom HTTPS private key
  caFile?: string;                 // --ca-file custom CA certificate
  graphqlTracing?: boolean;        // --graphql-tracing trace GraphQL resolvers
  openTracingConfigFile?: string;  // --open-tracing-config-file OpenTracing config
  inspect?: number;                // --inspect Node.js debugging port (default: 9229)
  inspectBrk?: number;             // --inspect-brk debugging with breakpoint
}

Usage Examples:

# Standard development server
gatsby develop

# Custom host and port
gatsby develop --host 0.0.0.0 --port 3000
gatsby develop -H localhost -p 8080

# Network access for testing on other devices
gatsby develop -H 0.0.0.0

# Auto-open browser
gatsby develop --open

# Enable HTTPS
gatsby develop --https

# HTTPS with custom certificates
gatsby develop --https --cert-file ./certificates/cert.pem --key-file ./certificates/key.pem

# Enable Node.js debugging
gatsby develop --inspect
gatsby develop --inspect-brk 9229

HTTPS Configuration

Secure development server setup for testing HTTPS-dependent features.

/**
 * HTTPS development server configuration
 * Supports custom certificates or automatic generation
 */
interface HttpsConfig {
  https: boolean;           // Enable HTTPS
  certFile?: string;        // Path to certificate file (.crt/.pem)
  keyFile?: string;         // Path to private key file (.key/.pem)  
  caFile?: string;          // Path to CA certificate file
}

Usage Examples:

# Basic HTTPS (uses generated certificates)
gatsby develop --https

# Custom certificate files
gatsby develop --https \
  --cert-file ./certs/localhost.crt \
  --key-file ./certs/localhost.key

# With CA certificate
gatsby develop --https \
  --cert-file ./certs/cert.pem \
  --key-file ./certs/key.pem \
  --ca-file ./certs/ca.pem

HTTPS Use Cases:

Testing service workers
Web APIs requiring secure context (geolocation, camera, etc.)
OAuth and authentication flows
Progressive Web App features
Secure cookie testing

Network Access Configuration

Configure development server for cross-device testing and team collaboration.

/**
 * Network access configuration for development server
 * Enables access from other devices on the same network
 */
interface NetworkConfig {
  host: string;    // Bind address (0.0.0.0 for network access)
  port: string;    // Port number
}

Usage Examples:

# Enable network access
gatsby develop --host 0.0.0.0

# Custom network configuration
gatsby develop --host 0.0.0.0 --port 3000

Network Access Benefits:

Test on mobile devices
Cross-browser testing
Team member access
Client demonstrations
Responsive design testing

Server Output Example:

You can now view your site in the browser.

  Local:            http://localhost:8000/
  On Your Network:  http://192.168.1.100:8000/

Debugging Integration

Node.js debugging support for server-side development and troubleshooting.

/**
 * Node.js debugging configuration
 * Enables Chrome DevTools debugging for server-side code
 */
interface DebuggingConfig {
  inspect?: number;     // Enable debugging on port (default: 9229)
  inspectBrk?: number;  // Enable debugging with breakpoint on port
}

Usage Examples:

# Enable debugging on default port (9229)
gatsby develop --inspect

# Custom debugging port
gatsby develop --inspect 9230

# Start with breakpoint (waits for debugger)
gatsby develop --inspect-brk

# Debugging with custom port and breakpoint
gatsby develop --inspect-brk 9230

Debugging Workflow:

Start development server with --inspect
Open Chrome DevTools
Navigate to chrome://inspect
Click "Open dedicated DevTools for Node"
Set breakpoints in server-side code
Debug build process and data layer

GraphQL Tracing

Performance analysis and debugging for GraphQL queries and resolvers.

/**
 * GraphQL tracing configuration
 * Enables detailed performance analysis of GraphQL operations
 */
interface GraphQLTracingConfig {
  graphqlTracing: boolean;          // Enable GraphQL resolver tracing
  openTracingConfigFile?: string;   // OpenTracing configuration file
}

Usage Examples:

# Enable GraphQL tracing
gatsby develop --graphql-tracing

# With OpenTracing configuration
gatsby develop --graphql-tracing --open-tracing-config-file ./tracing.json

Tracing Benefits:

Identify slow GraphQL resolvers
Profile query performance
Debug data fetching issues
Optimize build times
Monitor resource usage

Development Features

Built-in development server capabilities and tools.

Hot Module Replacement (HMR):

Instant updates without page refresh
Preserves component state
CSS updates without reload
Fast feedback loop

GraphQL Explorer:

Available at http://localhost:8000/___graphql
Interactive query builder
Schema documentation
Query testing and development

Development Pages:

/__graphql - GraphQL explorer
/_404 - 404 page testing
Error overlays for build failures

File Watching:

Automatic detection of file changes
Smart rebuilding of affected pages
Content updates from CMS/APIs
Plugin and configuration reloading

Environment Variables

Development server respects these environment variables:

interface EnvironmentVariables {
  GATSBY_HOST?: string;     // Default host (overrides localhost)
  PORT?: string;            // Default port (overrides 8000)
  HTTPS?: string;           // Enable HTTPS if "true"
  NODE_ENV?: string;        // Set to "development" automatically
}

Usage Examples:

# Set via environment
export GATSBY_HOST=0.0.0.0
export PORT=3000
gatsby develop

# Inline environment variables
GATSBY_HOST=0.0.0.0 PORT=3000 gatsby develop