Re-use current tab instead of open a new one

[elrumordelaluz]

• Operating System: OSX
• Node Version: 8.11.0
• NPM Version: 6.0.0
• webpack Version: 4.7.0
• webpack-dev-server Version: 3.1.4

• This is a bug
• This is a modification request

Code

  // webpack.config.js

  // additional code, remove if not needed.

Expected Behavior

Try to refresh the current browser window

Actual Behavior

Open always a new tab

For Bugs; How can we reproduce the behavior?

For Features; What is the motivation and/or use-case for the feature?

Inspired on create-react-app solution.

Since I usually use Google Chrome, I expect to stay in the same (current) browser tab
when re-launch webpack-dev-server, instead of use a new one and close those more.

Just curious if the Webpack people/ecosystem are interested in having this behaviour (will PR in case), since is very specific to Chrome browser in OSX platform.

Furthermore, the solution requires to have an extra file .applescript in the package.

Thoughts?

related #1185

[alexander-akait]

@elrumordelaluz yes, here issue webpack/webpack.js.org#2069

[flekschas]

Just in case somebody else stumbles upon this ticket and wonders "should I use webpack-serve"? webpack-serve is now deprecated!

DEPRECATED. Please use webpack-dev-server (he is in support and update mode again). Feel free to create a issue if some features are not implemented in webpack-dev-server.

[alexander-akait]

feel free to send a PR

[flekschas]

Just as a reference, @elrumordelaluz submitted a PR to webpack-serve regarding this matter: webpack-contrib/webpack-serve#117

Since it's much more involved than I thought it would be I am not sure it's simply to copy it over to webpack-dev-server. :)

[alexander-akait]

@flekschas feel free to send a PR

[alexander-akait]

Oh we don't have event/hooks right now, we need implement their

[speaud]

Would it be possible for the devServer.open property to accept a function? Maybe then the developer could write a function to check if a active session already exists. Possibly using the tabs.query() method.

[ghost]

vue-cli does this pretty well!
Also webpack-serve seems like made something for this. webpack-contrib/webpack-serve#117

[alexander-akait]

@atilkan PR welcome if you have idea how to implement it

[Akiyamka]

I have an idea for a more cross platform solution - we could add a shortcut (R - reload) for restart webpack from terminal. Similar to how it works in jest - by press R webpack restarting and refresh the already opened page.
Because we know that webpack already run open and openPage options will not triggered again.

[ckken]

mark

[kaspar-p]

There is a holdover solution for people waiting on this feature to be implemented into webpack-dev-server. The way create-react-app does it is with a react-dev-utils script called openBrowser. Importing this function into a webpack after function with the parameter of the host and port, works perfectly.

// webpack.config.js or webpack.config.babel.js
import openBrowser from "react-dev-utils/openBrowser";
...
devServer: { ..., after: () => { openBrowser("http://localhost:8080"); }, ... }

With one other caveat, the .applescript file needs to be copied into the root of your project. Information about that script and where to find these files here: https://stackoverflow.com/questions/48913566/how-does-create-react-app-re-use-an-existing-browser-tab-after-running-npm-run/48915952

[Akiyamka]

@Kaspar78 it's work only for mac platform

[ckken]

There is a holdover solution for people waiting on this feature to be implemented into webpack-dev-server. The way create-react-app does it is with a react-dev-utils script called openBrowser. Importing this function into a webpack after function with the parameter of the host and port, works perfectly.

// webpack.config.js or webpack.config.babel.js
import openBrowser from "react-dev-utils/openBrowser";
...
devServer: { ..., after: () => { openBrowser("http://localhost:8080"); }, ... }

With one other caveat, the .applescript file needs to be copied into the root of your project. Information about that script and where to find these files here: https://stackoverflow.com/questions/48913566/how-does-create-react-app-re-use-an-existing-browser-tab-after-running-npm-run/48915952

fixed it

[white-than-wood]

It seems to only apply to the mac platform, and create-react-app does the same: https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-dev-utils/openBrowser.js#L65-L86

[alexander-akait]

Yes PR welcome

[hcw2175]

Hey，I fount it work for me in webpack 5 like this:

// you could install react-dev-utils
import openBrowser from "react-dev-utils/openBrowser";

// webpack devServer config
{
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    hot: false,
    onListening: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }
      const addr = devServer.server.address();
      openBrowser(`http://${addr.address}:${addr.port}`);
    },
  }
}

good luck

[tarunsankhla]

is the issue closed?

[alexander-akait]

No