{"library":"react-dev-utils","title":"Create React App Development Utilities","description":"react-dev-utils is a collection of internal utility modules primarily used by Create React App (CRA) to abstract and manage webpack configurations, development server setups, build processes, and other development-related tasks. It includes tools for error formatting, path resolution, webpack plugin management like `ModuleScopePlugin`, and environment variable handling. The package is not typically consumed directly by applications but rather by build tools like `react-scripts`. Its versioning and release cadence are tightly coupled with `react-scripts`, making direct maintenance releases uncommon outside of major `react-scripts` updates. The current stable version of `react-dev-utils` is 12.0.1, which corresponds to `react-scripts` v5.x.x. This version incorporates significant updates such as webpack 5, Jest 27, and ESLint 8, ensuring compatibility with modern JavaScript ecosystems. It provides a standardized and optimized development experience for CRA projects, significantly minimizing configuration overhead for developers by encapsulating complex build logic. Developers typically interact with these utilities indirectly through `react-scripts` commands, though advanced users might import specific modules for custom setups, especially in ejected CRA applications.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-dev-utils"],"cli":null},"imports":["import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';","import { createDevServerConfig } from 'react-dev-utils/WebpackDevServerUtils';","import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import WebpackDevServer from 'webpack-dev-server';\nimport webpack from 'webpack';\nimport { createDevServerConfig, choosePort, prepareUrls } from 'react-dev-utils/WebpackDevServerUtils';\nimport openBrowser from 'react-dev-utils/openBrowser';\n\nasync function startCustomDevServer() {\n  const DEFAULT_PORT = parseInt(process.env.PORT || '3000', 10);\n  const HOST = process.env.HOST || '0.0.0.0';\n\n  const port = await choosePort(HOST, DEFAULT_PORT);\n  if (!port) {\n    console.log('No port found, exiting.');\n    return; \n  }\n\n  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';\n  const appName = 'My Custom React App';\n  const urls = prepareUrls(protocol, HOST, port, '/');\n\n  // Basic webpack configuration example\n  const webpackConfig: webpack.Configuration = {\n    mode: 'development',\n    entry: './src/index.tsx', // Assume a TypeScript entry point\n    output: {\n      path: process.cwd() + '/build',\n      filename: 'bundle.js',\n      publicPath: '/',\n    },\n    resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },\n    module: {\n      rules: [\n        { test: /\\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ },\n        { test: /\\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }\n      ],\n    },\n    plugins: [] // Add webpack plugins here\n  };\n\n  const devServerConfig = createDevServerConfig(\n    {\n      proxy: undefined,\n      allowedHost: undefined,\n      publicPath: webpackConfig.output?.publicPath,\n      contentBase: webpackConfig.output?.path,\n    },\n    urls.lanUrlForConfig\n  );\n\n  const compiler = webpack(webpackConfig);\n  const server = new WebpackDevServer(devServerConfig, compiler);\n\n  server.startCallback(() => {\n    console.log(`Starting the development server on ${urls.localUrlForBrowser}`);\n    openBrowser(urls.localUrlForBrowser!);\n  });\n\n  ['SIGINT', 'SIGTERM'].forEach(function (sig) {\n    process.on(sig, function () {\n      server.close();\n      process.exit();\n    });\n  });\n}\n\nstartCustomDevServer();\n","lang":"typescript","description":"Demonstrates how to set up a custom webpack development server using `react-dev-utils` for port selection, URL preparation, and dev server configuration, mimicking Create React App's internal logic. This example uses `webpack`, `webpack-dev-server`, and several utilities from `react-dev-utils` to initialize and manage the server.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}