Modify razzle start to open browser

[cseas]

📖 Documentation

I want to configure my Razzle project to automatically open in Chrome when I start it in development. Here's my razzle.config.js:

"use strict";

module.exports = {
  modify: (baseConfig, { target, dev }, webpack) => {
    const config = Object.assign(baseConfig, {
      devServer: {
        open: "chrome",
      },
    });
    return config;
  },
};

For reference, here's the property I'm trying to use: https://webpack.js.org/configuration/dev-server/#devserveropen

In create-react-app, it usually works by setting BROWSER=chrome in .env but that's not working in Razzle. I'm not sure how .env works in Razzle compared to CRA. Some helpful documentation on that would be great.

The webpack docs mention that the devServer options are ignored if we use dev-server through the Node.js API instead of the webpack CLI. Perhaps that is the issue here? Is there a way to make devServer options work with Razzle?

[cseas]

Additional context on the issue:

The hot reload feature isn't working either. I even tried enabling it by adding hot: true to devServer in the code above but hot reload still doesn't work.

Operating system: Windows 10 Browser: Chrome Editor: VSCode Terminal: VSCode baked in terminal (PowerShell)

[fivethreeo]

You need to extend the existing devServer config

"use strict";

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    config.devServer = Object.assign(config.devServer, {
        open: "chrome",
      });
    return config;
  },
};

[cseas]

@fivethreeo Did that code snippet work for you? I tried using the same code and got this error:

> razzle start

 WAIT  Compiling...

TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at modify (H:\projects-react\boilerplates\razzle\razzle.config.js:5:31)
    at module.exports (H:\projects-react\boilerplates\razzle\node_modules\razzle\config\createConfig.js:591:14)
    at main (H:\projects-react\boilerplates\razzle\node_modules\razzle\scripts\start.js:76:20)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

[fivethreeo]

Ah, was a issue with that solution.

"use strict";

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    if (target == 'web') {
      config.devServer = Object.assign(config.devServer, {
        open: "chrome",
      });
    }
    return config;
  },
};

[cseas]

Looks like this just took me back to square one. The code compiles without errors but the start script still doesn't automatically open a Chrome tab like webpack-dev-server usually does when open: "chrome" is set.

[fivethreeo]

The browser application name is platform dependent. Don't hard code it in reusable modules. For example, 'Chrome' is 'Google Chrome' on macOS, 'google-chrome' on Linux and 'chrome' on Windows.

[cotwitch]

As far as I understood, builds are served via express and not the wepback-dev-server - for which is configuration above supposed for. So, configuring webpack-dev-server seems useless in this case, because webpack-dev-server is actually not used/executed for this purpose at all (serving build). So, that's why browser is still not being opened as expected... (even after above script correction)

I've ended up using open package and manually opening browser, when server starts listening. (in /index.js - right after console.log(`> Started on port ${port}`); line, as after this point I'm sure that server is started already)

Am I right or completely wrong? Is there any better way to startup browser automatically (in development mode) @jaredpalmer @nimaa77 @fivethreeo ?

[fivethreeo]

We could add that to razzle start maybe?

[cseas]

I'm just running the regular razzle start command. (Actually npm run dev where "dev": "razzle start" if that matters)

The config here indicates that the script uses webpack-dev-server so I'm not sure why would it be impossible to configure it. The above suggested devServer razzle configs didn't work for me but there must be some way to configure devServer in razzle.

And I can confirm that open: "chrome" is the property I should be using because I have a separate project setup with webpack and setting this property there opens Chrome everytime I start webpack-dev-server, it just doesn't work with razzle. OS: Windows 10 Node v12.18.2

[fivethreeo]

We could change razzle start to call open if it is set in the webpack config. Can look into it.

[sunnykgupta]

Hey there @fivethreeo , I see you assigned this to yourself. If you aren't actively exploring, I can look.

[fivethreeo]

Hey there @fivethreeo , I see you assigned this to yourself. If you aren't actively exploring, I can look.

Go ahead. :)