# Data flow — react/create-react-app

> Canonical page: https://codevetter.com/unpack/create-react-app/data-flow

# Data flow — react/create-react-app

Scanned commit 6254386531d263688ccfa542d0e628fbc0de0b28 (2025-02-14). Generated by codevetter codevetter 1.12.0 on 2026-09-22.

Two data planes exist. Scaffolding: argv and template package contents flow through createApp into a new directory, then init.js materializes package.json, source files, and git state. App runtime: source files, env files, and public/ flow through webpack (Babel, CSS, asset plugins) into either an in-memory dev server or a build/ directory. Jest is a third consumer of the same Babel pipeline via babel-jest and a derived config. Environment variables are the main cross-cutting input: only NODE_ENV, PUBLIC_URL, and REACT_APP_* are inlined into the client bundle.
- CLI argv is parsed in createReactApp.js with a manual loop (not commander). project directory is resolved with path.resolve. If the directory exists and is not empty (except .git, .hg, LICENSE, README, and a few known files), createApp refuses to continue unless the name is . for the current directory. — [packages/create-react-app/createReactApp.js#L40-200](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/create-react-app/createReactApp.js#L40-L200)
- Template resolution: getTemplateInstallPackage turns --template typescript into cra-template-typescript, keeps scoped names, and supports file: paths and version suffixes (typescript@next). The template package and react-scripts are installed into the new app before init.js runs. — [packages/create-react-app/createReactApp.js#L700-900](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/create-react-app/createReactApp.js#L700-L900)
- init.js reads template/template.json via fs, copies the template directory with fs-extra, deletes the template's package.json and README if present so the generated package.json wins, then Object.assign-merges dependencies, scripts, eslintConfig, browserslist, babel, and jest keys. — [packages/react-scripts/scripts/init.js#L50-220](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/scripts/init.js#L50-L220)
- paths.js resolves appPath from process.cwd(), then appSrc (src/), appPublic (public/), appHtml (public/index.html), appIndexJs (src/index.* via moduleFileExtensions), appBuild (build/), dotenv (.env), and testsSetup (src/setupTests). moduleFileExtensions lists web.mjs, mjs, web.js, js, web.ts, ts, web.tsx, tsx, json, web.jsx, jsx. — [packages/react-scripts/config/paths.js#L1-140](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/paths.js#L1-L140)
- env.js loads dotenv files in priority order: .env.${NODE_ENV}.local, .env.local (skipped when NODE_ENV is test), .env.${NODE_ENV}, .env. It then builds the raw public env object containing NODE_ENV, PUBLIC_URL, WDS_SOCKET_*, FAST_REFRESH, and every key matching /^REACT_APP_/i. Those are stringified for webpack DefinePlugin as process.env.KEY. — [packages/react-scripts/config/env.js#L1-130](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/env.js#L1-L130) [packages/react-scripts/config/webpack.config.js#L400-520](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/webpack.config.js#L400-L520)
- webpack.config.js is a function (webpackEnv) => config. In production, mode is production, devtool is source-map unless GENERATE_SOURCEMAP=false, and output filenames include contenthash. In development, filenames are unhashed and devtool is cheap-module-source-map. output.publicPath comes from paths.publicUrlOrPath. — [packages/react-scripts/config/webpack.config.js#L60-180](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/webpack.config.js#L60-L180) [packages/react-scripts/config/paths.js#L100-160](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/paths.js#L100-L160)
- HTML path: HtmlWebpackPlugin reads public/index.html. InterpolateHtmlPlugin substitutes %PUBLIC_URL% and other env placeholders. MiniCssExtractPlugin extracts CSS only in production; style-loader injects CSS in development. TerserPlugin and CssMinimizerPlugin minify in production. — [packages/react-scripts/config/webpack.config.js#L450-650](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/webpack.config.js#L450-L650) [packages/react-dev-utils/InterpolateHtmlPlugin.js#L1-40](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-dev-utils/InterpolateHtmlPlugin.js#L1-L40)
- ModuleScopePlugin restricts imports that resolve outside src/ (and node_modules exceptions) so a user cannot accidentally import files from outside the project source tree via relative paths. babel-loader includes paths.appSrc only. — [packages/react-dev-utils/ModuleScopePlugin.js#L1-80](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-dev-utils/ModuleScopePlugin.js#L1-L80) [packages/react-scripts/config/webpack.config.js#L180-280](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/webpack.config.js#L180-L280)
- Jest config from createJestConfig sets roots to <rootDir>/src, testMatch to the standard CRA patterns, transform for js/jsx/ts/tsx via babel-jest and for css/files via custom transformers in react-scripts/config/jest, moduleNameMapper for CSS and asset stubs, and setupFilesAfterEnv pointing at src/setupTests if it exists. — [packages/react-scripts/scripts/utils/createJestConfig.js#L40-160](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/scripts/utils/createJestConfig.js#L40-L160) [packages/react-scripts/config/jest/cssTransform.js#L1-30](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/jest/cssTransform.js#L1-L30) [packages/react-scripts/config/jest/fileTransform.js#L1-40](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/jest/fileTransform.js#L1-L40)
- The TypeScript data path is fork-ts-checker-webpack-plugin (async typecheck) when tsconfig.json or jsconfig.json exists, plus babel-preset-react-app's TypeScript preset when the file extension is ts/tsx. ESLint uses @typescript-eslint/parser only if the user has installed it (resolved via require.resolve with a fallback). — [packages/react-scripts/config/webpack.config.js#L300-450](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/config/webpack.config.js#L300-L450) [packages/babel-preset-react-app/create.js#L40-120](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/babel-preset-react-app/create.js#L40-L120) [packages/eslint-config-react-app/index.js#L80-160](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/eslint-config-react-app/index.js#L80-L160)
- Error overlay data flow: webpack compile errors and runtime errors are formatted by react-dev-utils/formatWebpackMessages and react-error-overlay. webpackHotDevClient listens on the dev-server websocket and calls into the overlay iframe. Source maps are consumed by @babel/code-frame and a StackFrame parser. — [packages/react-dev-utils/webpackHotDevClient.js#L40-160](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-dev-utils/webpackHotDevClient.js#L40-L160) [packages/react-error-overlay/package.json#L1-40](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-error-overlay/package.json#L1-L40) [packages/react-dev-utils/formatWebpackMessages.js#L1-40](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-dev-utils/formatWebpackMessages.js#L1-L40)
- Production output boundary is paths.appBuild (build/). public/ files are copied with fs.copySync excluding index.html. The build script writes no server; deployment is a static host. Docs describe this and netlify.toml is only for the documentation site, not for generated apps. — [packages/react-scripts/scripts/build.js#L150-230](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/packages/react-scripts/scripts/build.js#L150-L230) [netlify.toml#L1-30](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/netlify.toml#L1-L30) [docusaurus/docs/deployment.md#L1-40](https://github.com/react/create-react-app/blob/6254386531d263688ccfa542d0e628fbc0de0b28/docusaurus/docs/deployment.md#L1-L40)

Every claim links to its cited files at the pinned commit. Citations identify source evidence; they do not establish runtime correctness. Independent CodeVetter scan — not reviewed by upstream maintainers.

## Public product links

- [CodeVetter](https://codevetter.com/)
- [Download](https://codevetter.com/download)
- [Documentation](https://codevetter.com/docs/)
- [Source](https://github.com/Codevetter/codevetter)