0

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.

Dastan Zhumazhanov
  • 21
  • 5

2 Answers2

1

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\""
Dastan Zhumazhanov
  • 21
  • 5
0

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:

[tabsOpened, setTabsOpened] = useState(false)

useEffect(() => {
    if (!window || tabsOpened) return null;
    window.open("http://example.com", "_blank");
    window.open("http://example1.com", "_blank");
    window.open("http://example2.com", "_blank");
    // etc...
    setTabsOpened(true)
}, [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?

Simon
  • 123
  • 3
  • 9
  • Thank you for your reply. But in that case, useEfffect opens tabs every time when parent functional component is rendered. Let's say we added that useEffect statement to main.js, everytime we go come back to main from another root(suppose there are several routes) it will open those windows. – Dastan Zhumazhanov May 19 '22 at 04:05
  • Yes, and I think a more user friendly way would be to ask the user to click something to open the additional tabs. But it sounded to me like opening several tabs automatically on launch of the application was what you were asking for. If you want, clarify the exact behaviour you are looking for and I will try to update my answer. – Simon May 19 '22 at 18:21
  • That's right, it would be much more convenient if a user could trigger some event. However, I want the app to open 3 tabs on the first launch and after that, it shouldn't open additional tabs(like in the previous case, if we update the page, it rerenders => open 3 more tabs. That's not desired). So I was thinking to bundle several commands like "node script1.js && node script2.js && node.script3.js", to open 3 browser tabs only at the first launch. – Dastan Zhumazhanov May 20 '22 at 00:46
  • You really can't do it like that. Node only runs on your computer, on on the web server, but not on the user's computer. I've updated my example to add a simple status keeping track of whether the tabs were already opened. But exactly how you do this depends completely on how you have built your app, and in reality you would probably need to do something more sophisticated. – Simon May 20 '22 at 19:17
  • Or are you planning to distribute the app like a node application that runs from the terminal?? – Simon May 20 '22 at 19:52
  • Simon, thank you for the updated reply. It seems to be simple & user-friendly, but if there are more tabs to open(or other tasks) the number of states grows and it becomes hard to manage them. So I think I'll proceed with concurrently to start several tasks. – Dastan Zhumazhanov May 21 '22 at 09:42