TLDR: How do apps like eg Discord and Slack build their apps separately for both Browsers and as Desktop apps (Electron.js) while using the same code base for UI and functional components?

So let's say I want to build an application similar to Discord. Let's assume we're limiting the scope to just Desktop and Browser for now. The core of the stack is a Next.js/React.

How would one setup a pipeline to build this in both Electron.js as a package as well as deploy a version on the web from the same code base? Doing those two separately with separate code bases is straightforward.

The way I see it, there are two main approaches but both have drawbacks:

1. Set up a monorepo, eg with rush.js, with three projects: one for components, one for electron and one for web. The electron project and web project both inherit dependencies from the components project, so that's one way to maintain a large part of the code as shared. Major Downside here is that hot reload can get messy, need to run rush build every time I make a change in the /components project.

2. Host the project like you would any other next.js project, and in the electron project simply load the url of the web project (so Electron would basically just become a browser). Here the question is how would you call the OS APIs Electron offers from the Front-End? If unable to trigger the main process APIs from the web version of the app running in the Electron container, then the whole purpose of Electron is defeated.

More importantly, how do Slack and Discord do it? The web experience and Desktop app experiences seem to be seamless.