or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-create-react-app

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

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

To install, run

npx @tessl/cli install tessl/npm-create-react-app@5.1.0

index.mddocs/

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.