React-app-rewired: Proxy settings

[artalar]

Hi!
How can i configurate proxy setting for development server? I need all /api.... network calls will redirect to other site api. I try

config.devServer = {
    ...(config.devServer || {}),
    proxy: {
      '/api': {
        target: 'http://__api_site_address__',
      },
    },
  };
  return config;

But seems webpack ignore it

[timarney]

@dawnmist any thoughts on this?

[dawnmist]

This looks like you are trying to set the dev server configuration directly inside the normal webpack config. That won't work for create-react-app, as they use a completely different script/configuration for the dev server.

If all you want to do is set up the proxy information, you can do that without having to use react-app-rewired to do it by adding a proxy section to your package.json file. Take a look at the create-react-app documentation here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development and here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually

If you do still need to modify the dev server configuration, you need to use the alternative module.exports object version for settings in the config-overrides.js file instead of the single function version https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/config-overrides.js and provide the devServer section (if you are also modifying the normal config make sure you copy those changes to the webpack function too). The inner function in the devServer section is called as a function by the dev server's start script, so it needs to match the example in that file or your changes to the dev server configuration will not be applied.

[artalar]

Your first link is enough for me, thanks!
Also thanks for detailed answer this is useful!

[timarney]

Thanks for jumping in @dawnmist I appreciate it.