React-app-rewired: How can I disable CRA eslint and set dev server proxy in config-override.js?

[jaggerwang]

For the first one, I found CRA lint all files even when I just modified one. It makes the recompile process taking more than 10s in our project, so I want to disable it, as we are already using StandardJS to lint code.

For the second, right now the proxy config is in package.json, and the proxy target is fixed. But everyone in our team may need a different target at some time. I want to set the proxy target by environment variable, so everyone can set it by running PROXY_TARGET=http://x.x.x.x:8080/ npm start, and not to touch the package.json.

[dawnmist]

The eslint compile is done as a 'pre' rule in the config.module.rules section, so you would want to find that particular rule and remove it from the array. The default create-react-app scripts only has one 'pre' rule in the config, and it is the first one - assuming that you are not using a customised react-scripts version you should be able to simply slice the first rule out of the rules array.

For the second, you'd want to override the 'proxy' variable in the devServer config. This means that you will need to use the alternate configuration definition inside your config-overrides.js file.

An example config-overrides.js file based on using the default react-scripts that should do what you're after:

module.exports = {
  webpack: function(config, env) {
    // Keep all rules except the first - note that if they add additional rules this will need updating to match
    // Consider if this should only apply to the development environment? If so, uncomment the if statement
    // if (env === 'development') {
    config.module.rules = config.module.rules.slice(1);
    // }
    return config;
  },
  jest: function(config) {
    return config;
  },
  devServer: function(configFunction) {
    return function(proxy, host) {
      // Use the environment variable if it exists, else default to the package.json proxy value
      const config = configFunction(process.env.PROXY_TARGET || proxy, host);
      return config;
    }
  }
}

There is also the .env file where this environment variable could be defined, so that it doesn't have to be typed in on the command line all the time. Each developer could then set up their machine for their dev environment using their own .env.* files. Take a look at Adding Development Environment Variables in Env in the Create-React-App documentation for more detail on using the .env files.

[liuyangc3]

this is my config-overrides.js

devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      proxy = {
        "/api": {
          "target": "http://localhost:8080",
          "changeOrigin": true
        }
      };

      const config = configFunction(proxy, allowedHost);
      return config;
    }
  }

seems not work, app still ues port 3000 to fetch '/api' @dawnmist

[dawnmist]

@liuyangc3 For a static proxy definition like that you should be defining the proxy itself in your package.json file as per the instructions at create-react-app's readme. The proxy information then gets passed into your devServer function to pass on directly - the only times it would need altering in devServer is if there is information being dynamically calculated instead of a static definition like the one you've shared. The dev function you've posted doesn't actually contain anything that isn't already natively supported by create-react-app - if that's all yours contained you can simply move the proxy definition into your package.json file and remove the devServer function definition entirely.

[dawnmist]

If you did need to define it dynamically (e.g. setting the target via a command line variable), it looks like react-scripts is passing the proxy object value through react-dev-utils/WebpackDevServerUtils prior to passing it on to the config function, and transforming it in there. So I'd recommend trying to use the same transform function that react-scripts/scripts/start.js uses:

const { prepareProxy} = require('react-dev-utils/WebpackDevServerUtils');
const paths = require('react-scripts/config/paths');

module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const proxySettings = {
        "/api": {
          "target": "http://localhost:8080",
          "changeOrigin": true
        }
      };
      proxy = prepareProxy(proxySettings, paths.appPublic);
      const config = configFunction(proxy, allowedHost);
      return config;
    }
  }
};