How does `npm start` always open the same instance of the browser?

Today, after many years of developing websites, while I was spinning up a new project, this question hit me.

I have multiple browsers open, multiple instances for each browser, each having multiple tabs, and one of the tabs was running my localhost:3000 . I then checked my email in another tab, used LinkedIn in another browser and did a lot of browsing. Finally, I realised I was supposed to work on the project, so I opened my VSCode, stopped the terminal and again ran yarn start …it automatically opened the same instance of the same browser where it was already open.

How did this happen? Who is doing this?

So my research started.

Note: I am using a sepcific example of react, but the overall idea remais the same for other technolgies and tools as well

Assuming your start script looks something like this "start": “react-scripts start”, here is what happens:

1. react-scritps internally uses opn npm package (it’s called open now) to open the URL http://localhost:300 (or whatever you’ve configured)
2. The open the package uses the default protocol handler provided by the operating system, LSOpenURLsWithRole in the case of Mac to achieve this magic.

Let’s dive deeper into the LSOpenURLsWithRole API and how it works on macOS.

LSOpenURLsWithRole is a part of the Launch Service framework on macOS, which provides a way for applications to open URLs and launch other applications. This is specifically designed to open a URL in the default application associated with that URL scheme.

When react-scripts uses the open package to open the URL following things happen:

1. URL Scheme Matching: The LSOpenURLsWithRole function checks the URL scheme of the provided URL (`http` in this case). It then looks for the application that is registered to handle URLs with that scheme.
2. Previously Opened Browser Detection: The LSOpenURLsWithRole function checks for an existing instance of any browser that was previously used to open a URL with the same scheme. This and other similar info is stored in the launch service database, which maintains a list of applications and their associated URLs.
3. Reusing existing instance: If an existing instance of the previously opened browser is found with a matching URL scheme, the function reuses that instance and navigates to the specific URL (`http://localhost:3000`) in the current tab or window, bringing the existing instance to the foreground.
4. Launching a new instance: If no existing instance of the default browser is found with a matching URL scheme, the LSOpenURLsWithRole function launches a new instance of the default browser and opens the specified URL in a new tab.

This is how the LSOpenURLsWithRole can accurately determine which browser and which tab to bring to the foreground.

Let me know in the comments if you have any feedback or suggestions.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.