CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-create-react-app

Command-line tool for creating React applications with pre-configured build setup.

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

Create React App

Create React App is a command-line tool that generates React applications with pre-configured build setup, eliminating the need for manual webpack, Babel, and other tooling configuration. It provides a zero-configuration development environment with hot reloading, testing, and optimized production builds, allowing developers to start building React applications immediately.

Package Information

  • Package Name: create-react-app
  • Package Type: npm
  • Language: JavaScript (Node.js CLI tool)
  • Installation: npm install -g create-react-app or use with npx
  • Node.js Requirements: Node 14 or higher

Core Imports

For programmatic usage (available exports):

// Import from the main createReactApp.js module
const { init, getTemplateInstallPackage } = require("create-react-app/createReactApp");

// Note: The main index.js simply calls init() and is primarily for CLI usage
// Direct module.exports from createReactApp.js:
// { init, getTemplateInstallPackage }

Basic Usage

Command Line Usage (Primary Interface):

# Create a new React app
npx create-react-app my-app

# Create with TypeScript template
npx create-react-app my-app --template typescript

# Create with custom template
npx create-react-app my-app --template cra-template-pwa

# Show environment information
npx create-react-app --info

# Verbose output
npx create-react-app my-app --verbose

Programmatic Usage:

const { init } = require("create-react-app/createReactApp");

// Initialize create-react-app (processes command line arguments)
init();

Capabilities

CLI Interface

Main command-line interface for creating React applications.

/**
 * Command-line interface with the following signature:
 * create-react-app <project-directory> [options]
 */
interface CLIOptions {
  /** Project directory name (required) */
  projectDirectory: string;
  /** Print additional logs during creation */
  verbose?: boolean;
  /** Print environment debug information */
  info?: boolean;
  /** Use non-standard version of react-scripts */
  scriptsVersion?: string;
  /** Specify template for the created project */
  template?: string;
  /** Enable Yarn Plug'n'Play (deprecated) */
  usePnp?: boolean;
}

Initialization Function

Main programmatic entry point that processes command-line arguments and orchestrates app creation.

/**
 * Initialize create-react-app CLI processing
 * Reads from process.argv, shows deprecation warning, and executes the app creation workflow
 * Performs version checking against npm registry and warns if outdated
 * Handles --info flag to display environment information
 * Handles --help flag to show usage information
 * @returns {void | Promise<void>} Returns void for synchronous operations, Promise for async operations like environment info display
 */
function init(): void | Promise<void>;

Version Checking

Automatic version validation against npm registry with fallback mechanisms.

/**
 * Check for latest version of create-react-app on npm registry
 * Falls back to 'npm view create-react-app version' if direct API fails
 * Used internally by init() to warn users of outdated versions
 * @returns {Promise<string|null>} Promise resolving to latest version string or null if unavailable
 */
function checkForLatestVersion(): Promise<string | null>;

Template Package Resolution

Resolves template names to installable package names with proper cra-template prefix handling.

/**
 * Resolve template package names for installation
 * Automatically adds 'cra-template-' prefix to template names when needed
 * Handles local paths (file:), URLs, and scoped packages
 * @param {string} [template] - Template name, path, or URL. Defaults to 'cra-template' if not specified
 * @param {string} originalDirectory - Original working directory path for resolving relative file paths
 * @returns {Promise<string>} Promise resolving to installable package name with proper prefixes
 */
function getTemplateInstallPackage(
  template?: string,
  originalDirectory: string
): Promise<string>;

CLI Command Options

Required Arguments

<project-directory>: Name or path for the new React project directory.

Optional Flags

--verbose: Enable verbose logging during project creation, showing detailed output from npm/yarn installation and setup processes.

--info: Display comprehensive environment information including:

  • Current create-react-app version and installation directory
  • System information (OS, CPU)
  • Binary versions (Node.js, npm, Yarn)
  • Browser versions (Chrome, Edge, Internet Explorer, Firefox, Safari)
  • npm package versions (react, react-dom, react-scripts)
  • Global npm packages (create-react-app)

Output is formatted using the envinfo library with duplicates shown and missing packages indicated.

--scripts-version <alternative-package>: Specify non-standard version of react-scripts. Accepts:

  • Specific npm version: 0.8.2
  • npm tag: @next
  • Custom fork: my-react-scripts
  • Local path: file:../my-react-scripts
  • Archive URL: https://example.com/my-react-scripts.tgz

--template <path-to-template>: Specify template for project creation. Accepts:

  • npm package: typescript, cra-template-pwa
  • Scoped package: @company/cra-template-custom
  • Local path: file:../my-template
  • Archive URL: https://example.com/template.tar.gz

--use-pnp: Enable Yarn Plug'n'Play (deprecated in newer versions).

Template Resolution

Create React App automatically resolves template names using the following patterns:

/**
 * Template resolution examples based on actual implementation:
 */
interface TemplateResolution {
  // Input -> Resolved Package Name
  "typescript": "cra-template-typescript";  // Adds prefix to simple names
  "cra-template": "cra-template";           // Preserves existing cra-template prefix
  "cra-template-typescript": "cra-template-typescript"; // No change needed
  "@scope/template": "@scope/cra-template-template";     // Adds prefix to scoped packages
  "@scope/cra-template": "@scope/cra-template";          // Preserves existing prefix in scoped packages
  "@scope/cra-template-typescript": "@scope/cra-template-typescript"; // No change for complete scoped names
  "file:../my-template": "file:/absolute/path/to/my-template"; // Resolves relative file paths to absolute
  "https://example.com/template.tgz": "https://example.com/template.tgz"; // URLs and archives pass through unchanged
  "my-template.tar.gz": "my-template.tar.gz"; // Archive files pass through unchanged
  "@next": "@next/cra-template";              // Version-only input gets default template name
}

Project Structure

Create React App generates the following standard project structure:

my-app/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── App.test.js
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Environment Requirements

interface SystemRequirements {
  /** Minimum Node.js version */
  nodeVersion: ">=14.0.0";
  /** Supported package managers */
  packageManagers: ["npm", "yarn"];
  /** Minimum npm version for full feature support */
  npmVersion: ">=6.0.0";
  /** Minimum Yarn version for PnP support (deprecated) */
  yarnPnpVersion: ">=1.12.0";
}

Error Conditions

The tool handles several error scenarios:

  • Invalid Node.js version: Exits with error code 1 if Node.js < 14, shows specific upgrade message
  • Missing project directory: Shows usage help and exits if no project directory specified
  • Invalid project name: Validates against npm naming restrictions using validate-npm-package-name
  • Directory conflicts: Checks for existing files that could conflict with project structure
  • Outdated version: Warns when running older version than latest available on npm registry
  • Network issues: Handles offline scenarios and registry connectivity, falls back to local npm commands
  • Package installation failures: Provides cleanup and detailed error reporting
  • Template resolution failures: Falls back to default template or shows helpful error messages
  • Unsupported Node.js version: Validates Node.js compatibility for react-scripts
  • Missing required tools: Checks for npm/yarn availability and proper configuration

Dependencies

Create React App installs the following core dependencies in created projects:

interface ProjectDependencies {
  /** Core React library */
  react: string;
  /** React DOM rendering */
  "react-dom": string;
  /** Build scripts and development server */
  "react-scripts": string;
  /** Optional: Template-specific dependencies */
  [templateDependency: string]: string;
}

Deprecation Notice

As of version 5.1.0, Create React App shows a deprecation warning directing users to modern React frameworks. The warning is displayed once per install and includes:

  • Message that create-react-app is deprecated
  • Reference to react.dev for up-to-date React frameworks
  • Link to https://react.dev/link/cra for more information
  • Note that the error message will only be shown once per install

The tool continues to function but recommends exploring alternatives listed on react.dev.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/create-react-app@5.1.x
Publish Source
CLI
Badge
tessl/npm-create-react-app badge