Create React App Development Utilities

12.0.1 · maintenance · verified Sun Apr 19

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.

Common errors

Warnings

Install

Imports

Quickstart

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.

import WebpackDevServer from 'webpack-dev-server';
import webpack from 'webpack';
import { createDevServerConfig, choosePort, prepareUrls } from 'react-dev-utils/WebpackDevServerUtils';
import openBrowser from 'react-dev-utils/openBrowser';

async function startCustomDevServer() {
  const DEFAULT_PORT = parseInt(process.env.PORT || '3000', 10);
  const HOST = process.env.HOST || '0.0.0.0';

  const port = await choosePort(HOST, DEFAULT_PORT);
  if (!port) {
    console.log('No port found, exiting.');
    return; 
  }

  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
  const appName = 'My Custom React App';
  const urls = prepareUrls(protocol, HOST, port, '/');

  // Basic webpack configuration example
  const webpackConfig: webpack.Configuration = {
    mode: 'development',
    entry: './src/index.tsx', // Assume a TypeScript entry point
    output: {
      path: process.cwd() + '/build',
      filename: 'bundle.js',
      publicPath: '/',
    },
    resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
    module: {
      rules: [
        { test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ },
        { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }
      ],
    },
    plugins: [] // Add webpack plugins here
  };

  const devServerConfig = createDevServerConfig(
    {
      proxy: undefined,
      allowedHost: undefined,
      publicPath: webpackConfig.output?.publicPath,
      contentBase: webpackConfig.output?.path,
    },
    urls.lanUrlForConfig
  );

  const compiler = webpack(webpackConfig);
  const server = new WebpackDevServer(devServerConfig, compiler);

  server.startCallback(() => {
    console.log(`Starting the development server on ${urls.localUrlForBrowser}`);
    openBrowser(urls.localUrlForBrowser!);
  });

  ['SIGINT', 'SIGTERM'].forEach(function (sig) {
    process.on(sig, function () {
      server.close();
      process.exit();
    });
  });
}

startCustomDevServer();

view raw JSON →