React open multiple tabs on launching of project using npm-CodePudding

I'm making react app, which should run on multiple monitors. By default npm start runs index.js script and render's "root" component. However, I need to open different windows/tabs(windows1, window2, window3 with different content) on npm start. Is there way to accomplish it?

Any help would be appreciated.

CodePudding user response：

Automatically opening the browser when running npm will only work on your local computer. People will access the application by going to the URL of the server it is hosted on.

You can open tabs using window.open.

If you want to open tabs automatically on page load you can wrap it in a useEffect call and put this in a suitable place depending on how your application is set up. It would look something like this:

useEffect(() => {
    if (!window) return null;
    window.open("http://example.com", "_blank");
    window.open("http://example1.com", "_blank");
    window.open("http://example2.com", "_blank");
    // etc...
}, [window])

Note that some browsers/plugins may block you from opening multiple tabs. I just did a test and it seems to work in Safari but not Chrome.

If you want to specify on which monitor each window opens things get a bit more complicated. But this question seems to be a good starting point: window.open() on a multi-monitor/dual-monitor system - where does window pop up?

CodePudding user response：

I solved the problem using concurrently and wait-on. Inside of package.json:

"sidetask":"wait-on http://localhost:3000 && node src/sidetask.js",
"start-all": "concurrently \"npm run sidetask\" \"npm start\""