getClientEnvironment() — react Function Reference

Architecture documentation for the getClientEnvironment() function in env.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ getClientEnvironment() — react Function Reference

Dependency Diagram

graph TD
  f041d0e4_e4c2_ab3f_75b2_529134350c94["getClientEnvironment()"]
  72d67d92_3bb1_8af8_c57a_5f3cbd0b7390["env.js"]
  f041d0e4_e4c2_ab3f_75b2_529134350c94 -->|defined in| 72d67d92_3bb1_8af8_c57a_5f3cbd0b7390
  style f041d0e4_e4c2_ab3f_75b2_529134350c94 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/config/env.js lines 63–102

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
        // We support configuring the sockjs pathname during development.
        // These settings let a developer run multiple simultaneous projects.
        // They are used as the connection `hostname`, `pathname` and `port`
        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
        // and `sockPort` options in webpack-dev-server.
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
        // Whether or not react-refresh is enabled.
        // It is defined here so it is available in the webpackHotDevClient.
        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
      }
    );
  // Stringify all values so we can feed into webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return {raw, stringified};
}