Mastering CRA: From Quick Initialization to Advanced Customization for React Projects

Initialization

The article begins by recommending the official create‑react‑app (CRA) CLI for quickly scaffolding a React project, avoiding manual webpack configuration. Run the following command to create a new project: npx create-react-app my-project-name For a TypeScript‑enabled project, use the --template ts flag:

npx create-react-app my-project-name --template ts

Static type checking can also be added with Flow or PropTypes as alternatives.

Customization Options

Method 1: Eject

Running npm run eject exposes the internal react‑scripts configuration, allowing direct modification of Webpack, Babel, ESLint, etc. This is irreversible and increases maintenance complexity, suitable for single‑project use.

Method 2: Fork CRA

Fork the CRA repository and modify the react‑scripts package to customize both the build pipeline and the generated source templates (e.g., App.js). This requires deeper Node and npm knowledge.

Method 3: react‑app‑rewired

Install react-app-rewired as a development dependency and create a config-overrides.js file to merge custom Webpack settings without ejecting or forking.

/* config-overrides.js */
module.exports = function override(config, env) {
  // modify the webpack config here
  return config;
};

Update package.json scripts to use the rewired commands:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }
}

For projects using Sass, add scripts to compile and watch CSS:

{
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-app-rewired start",
    "build-js": "react-app-rewired build",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm-run-all build-css build-js",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Example configuration for Ant Design and Less using react-app-rewire-less and react-app-rewire-mobx:

const { injectBabelPlugin } = require('react-app-rewired');
const rewireMobX = require('react-app-rewire-mobx');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  config = injectBabelPlugin(["import", { libraryName: "antd", style: true }], config);
  config = rewireLess(config, env, { modifyVars: {
    "@body-background": "#f9f9f9",
    "@primary-color": "#5292ea",
    "@font-size-base": "14px",
    "@btn-height-base": "40px",
    "@btn-height-lg": "@btn-height-base + 4px",
    "@btn-height-sm": "@btn-height-base - 10px",
    "@modal-mask-bg": "rgba(0, 0, 0, 0.6)",
    "@tooltip-max-width": "200px",
    "@tooltip-bg": "#ffffff",
    "@tooltip-color": "#444",
    "@tooltip-arrow-width": "7px",
    "@tooltip-distance": "@tooltip-arrow-width"
  } });
  config = rewireMobX(config, env);
  return config;
};

Environment Configuration

Create .env.development and .env.production files to store variables prefixed with REACT_APP_. Example:

# .env.development
REACT_APP_TOPIC_API_URL=//clubajax.autohome.com.cn

Access the variable in code via process.env.REACT_APP_TOPIC_API_URL. For production builds, use .env.production and run npm run build.

Proxy and Host Settings

To avoid CORS issues, add a proxy field in package.json:

{
  "proxy": "http://clubajax.autohome.com.cn"
}

Configure the local hosts file (or a host‑management tool) to map the domain to the correct IP, e.g.: 10.20.180.22 clubajax.autohome.com.cn If the backend requires port 80, set the start script accordingly and run with sudo if necessary:

{
  "scripts": {
    "start": "PORT=80 react-app-rewired start"
  }
}
# then
sudo npm start

CDN and Asset Hosting

When deploying to a CDN, set the homepage field in package.json to the base URL of the static assets:

{
  "homepage": "//s.autoimg.cn/club/abc/"
}

Conclusion

The article does not cover routing but provides a practical checklist for initializing, customizing, and configuring a React project with CRA, covering TypeScript support, build overrides, environment variables, proxy handling, port configuration, and CDN integration.