devServer: open & openPage seems not to be working

[raed667]

Tried to disable devServer.open or change devServer.openPage doesn't seem to have any effect.

[dawnmist]

I'm sorry, but what you've said makes no sense. There is no devServer.open or devServer.openPage.

If you're trying to stop the browser window from being automatically opened, it's done by adding BROWSER='none' to your .env file (create it if it doesn't exist), as documented in the create-react-app advanced configuration documentation. That doesn't need react-app-rewired.

[raed667]

Thank you for your response but I point you to these :

https://webpack.js.org/configuration/dev-server/#devserver-open
https://webpack.js.org/configuration/dev-server/#devserver-openpage

BROWSER fixes this for me thanks, so closing.

[dawnmist]

I'm glad that the BROWSER option did all you needed.

For future reference (and anyone else reading this) - react-app-rewired has the option to define a devServer function to customize the webpack config for the development server. That's why I'd said there wasn't a devServer.open/devServer.openPage option - I'd thought you were trying to set that as the react-app-rewired devServer function rather than as a webpack config option.

In order to change any config options for the webpack dev server that gets run with yarn start, you must make the changes to the webpack config inside the react-app-rewired devServer function as per the Extended Configuration Options section of the react-app-rewired readme. It will not work in the normal function because create-react-app use a different configuration for the webpack-dev-server.

[raed667]

Thank you for the response my config-overdrives l have something like this :

const APP_PATH = "/myapp/";

module.exports = {
  webpack: function(config, env) {
    config.output.publicPath = APP_PATH; // because of this
    config.output.filename = "static/js/bundle.js";
    return config;
  },
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);

      config.openPage = APP_PATH; // this
      config.https = false; // or this

      config.historyApiFallback.disableDotRule = true;
      return config;
    };
  }
};

This does not open the proper url for me, with a quick look can you see if i'm doing something wrong ?

[dawnmist]

Just to check - what you're after is for the address to be http://example.com/myapp/ instead of http://example.com/ ?

If so, that should also be available from create-react-app's default options, see their documentation: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

Https can be turned on/off for the webpack dev server by using the HTTPS variable in your .env file: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration

[raed667]

The app address is http://localhot/myapp/ as it should perfectly.

The only problem is when the devServer opens a browser window on yarn start it opens http://localhot/ which is a blank page.

[dawnmist]

Ok, I hadn't realized that the homepage setting only applied to production mode.

Googling the issue found this pull request, and this one (neither of which has been merged, and apparently would need rewriting to go with webpack 4) to enable using subpaths in development mode too.

These pulls both show that there are multiple other files within react-scripts both react-dev-utils that need to be altered in order for the dev server to be able to build/open a subpath site. The changes go beyond the scope of what react-app-rewired can do, as create-react-app is currently hard-coding the dev environment to the root url in many places outside of the webpack config options. :(

Apparently they are aiming to get this feature available for the cra 2.0 release.

If it is really important that this be changed in your dev environment, I'd suggest possibly looking at patch-package in order to apply the patches in one of the pulls to the relevant react-scripts/react-dev-server packages. You'd need to manually apply them to one package at a time (e.g. do all the changes for files inside react-scripts, record the patch for react-scripts, then do all the changes for files inside react-dev-utils and record the patch for react-dev-utils). The patches can break if the packages change, but patch-package will let you know when that happens.

[raed667]

I see! Thank you for the lengthy and detailed response.

For my dev experience I can settle now for the URL not being opened on devServer start at all. It is still better than a blank page.

[hamed-farag]

@RaedsLab could you please share with me how openPage property work with you in config-overrides.js