CodeVetter · Repo Unpack · Data flow
react/create-react-app
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.