CodeVetter · Repo Unpack · Behavior traces
react/create-react-app
Three end-to-end traces matter: creating an app, starting the dev server, and producing a production build. A fourth shorter trace is the Jest test command and a fifth is eject. Each names the functions in call order as they appear in the source.
- Startup trace (npx create-react-app my-app --template typescript): index.js checks node version -> calls run() in createReactApp.js -> parses argv into program flags -> createApp(name, verbose, scriptsVersion, template, usePnp) -> validates app name with validate-npm-package-name -> makes the directory -> writes a temporary package.json -> installs react, react-dom, react-scripts, and the template package via spawn of npm/yarn -> executeNodeScript(react-scripts/scripts/init.js) with JSON argv.
- init.js trace: verify node and react-scripts version compatibility -> copy template files from template/template into the app root -> merge template.json -> rename gitignore -> delete template package leftovers -> run git init, git add, git commit if git is available and the directory is not already a repo -> print Next steps (cd, npm start, npm test, npm run build, npm run eject). On failure it attempts to remove the created directory unless the user used . as the name.
- Dev server trace (npm start -> react-scripts start): start.js sets BABEL_ENV=development and NODE_ENV=development -> require('../config/env') -> checkRequiredFiles([appHtml, appIndexJs]) exits 1 if missing -> checkBrowsers(appPath) reads browserslist -> choosePort(HOST, DEFAULT_PORT 3000) -> configFactory('development') -> createCompiler({config, appName, urls, useYarn, useTypeScript, webpack}) -> prepareProxy(package.json proxy, appPublic, HOST) -> createDevServerConfig -> new WebpackDevServer -> devServer.startCallback -> openBrowser(urls.localUrlForBrowser) -> listen for stdin end and signals to gracefully shutdown.
- Compiler hook trace inside createCompiler: compiler.hooks.invalid, beforeCompile, and done. On done, formatWebpackMessages splits errors and warnings; TSC errors are appended when useTypeScript; if errors exist, printBuildError-style instructions are shown and the dev server keeps running. Successful compiles clear the console (unless COMPILER_TERMINAL is set or CI) and print the local and network URLs.
- Production build trace: build.js sets NODE_ENV=production -> checkRequiredFiles -> checkBrowsers -> measure file sizes of existing build/ -> fs.emptyDirSync(paths.appBuild) -> copyPublicFolder() -> build(previousFileSizes) which returns a Promise around webpack(configFactory('production')).run -> formatWebpackMessages -> if errors, reject and print the first error only -> resolve with stats, warnings, previous sizes -> printFileSizesAfterBuild -> printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn).
- Test trace: test.js sets BABEL_ENV=test and NODE_ENV=test -> env.js loads .env.test and .env but not .env.local -> argv is rewritten so that --watch is added when stdin is a TTY and CI is unset, or --watchAll when --coverage is passed without an explicit watch flag -> require('jest').run(argv). createJestConfig resolves transformers relative to react-scripts so ejected apps can retarget them.
- Eject trace: eject.js confirms prompt (unless CI) -> verifies git clean via git status --porcelain -> copies config/ and scripts/ from react-scripts into the app -> rewrites package.json dependencies by inlining react-scripts' own deps minus the blacklist -> replaces script entries -> removes react-scripts -> writes config files with a generated header comment. This is the documented escape hatch before 'alternatives to ejecting'.
- Template render trace for the default app: public/index.html is the HTML shell -> src/index.js imports React, ReactDOM, ./index.css, App, and reportWebVitals -> creates a root on document.getElementById('root') and renders <App /> -> App.js returns the header/logo/link tree -> App.test.js uses React Testing Library render and screen.getByText(/learn react/i).
- Browserslist gate: before start or build, checkBrowsers prompts (or fails in CI) when the browserslist config in package.json targets browsers that would pull in extra polyfills or when the default CRA browserslist is missing. Default template browserslist is production >0.2%, not dead, not op_mini all and development last 1 chrome/firefox/safari version.
- Fast Refresh path: when FAST_REFRESH is not false, webpack entry includes the React Refresh client and babel-preset-react-app enables react-refresh/babel in development. webpackHotDevClient.js is still the CRA client that reports compile status; React Refresh handles component state-preserving updates separately from full reloads.
- --scripts-version path: if the user passes a version, tarball URL, or file: path, createReactApp installs that instead of the bundled react-scripts dependency. A custom fork must still expose scripts/init.js because executeNodeScript hard-codes that relative path inside the installed package.