How do I set up a JS monorepo with an apps and a libraries directory?

Question

I'm pretty new to monorepos, but I had some exposure to Lerna before and I'm currently learning NX.

I would like to setup a proof-of-concept project where I have several "applications" (things that are deployed to a URL and can be clicked by an end-user) and some "libraries" (things that are consumed by other programs / programmers).

Let's say I have a

• A public facing website, that's a product landing page with a few sub-pages, ideally it would be a statically rendered page.
• A web-application that's an SPA interacting with a backend API
• A back-office admin panel (also an SPA for CRUD operations)

All of these would be considered stand-alone applications but they would need to share some code, at a minimum they should all follow a common design and use the same UI components.

So by that logic I would have at least a UI-component library and maybe some shared utility library and some shared business logic (data models, some data fetching or API library, etc). I don't want to publish these libraries to NPM, they will only be consumed by the applications in my monorepo.

I imagine to have a folder structure that looks something like this.

apps/
   |-web-app/
   |-admin-dashboard/
   |-landing-page/
libraries/
   |-ui-components/
   |-api-client/
   |-utilities/
package.json

Now my first question is, does that imply that I need two separate workspaces setup in my root package.json? One that threats every folder directly inside apps and libraries as a package? Just because all the monorepo setups I saw had a packages/ folder that housed all the... well all the packages. I can of course also have everything under packages/ but for me it really makes sense to separate apps and libraries.

My second question is regarding the development workflow. I know that NX can run multiple NPM scripts parallel within multiple packages.

So let's say if I want to work on the UI of my landing page and my web-app I would need to run some sort of watch command in both of these packages that open up their respective local dev servers. Now if I also run the watch in the UI library and only make changes on the code that lives there (but is consumed by both the landing page and the web-app packages), would that trigger a hot reload on both of the applications running in development mode?

I tried such a thing on an example monorepo and I could only see the changes coming from the shared libraries once I restarted the dev server of the consumer package, which doesn't seem like a viable option to me... Is this possible with such a setup?

I'm just looking for some guidance on how to set this up, maybe some relevant examples or tutorials that show a similar use-case.