How do you specify & configure the client in a fullstack project?

[walkermalling]

How do you specify the client root in a fullstack (typescript + react) project? That is, a project in which both a backend and a frontend are implemented, with some common modules. Typically:

📁 src
↳ 📁 app
↳ 📁 server
↳ 📁 common

I've been trying to find examples, but can't find any. I've tried using createapp.dev and then modifying it to move the client code into a subdirectory, such as src/app, but haven't been able to get it to work. The snowpack config options don't seem to help (mount. roodDir, workspaceRoot, buildOptions.baseUrl) and the explanations in the docs are very terse. For example, with buildOptions.baseUrl: "In your HTML, replace all instances of / with this. Inspired by the same Create React App concept. This is useful if your app will be deployed to a subdirectory."

If there isn't a working example to refer to, then there is no context to elucidate why a configuration is the way it is.

So these seem to be the main questions that need answering in order to set up a fullstack app:

1. The snowpack.config.js needs to be in the repo root; but how do you point it to a specific html entrypoint?
2. How do you handle separate tsconfig.json files for src/app and src/server, i.e., how do you tell snowpack which tsconfig pertains to the bundled build? part of this question is being able to refer to the src/common modules, and also to be able to use typescript path mapping.
3. How do you get the final bundled build to be served by a production http server like expressjs? This is probably a res.sendFile, but again, an example covering the intermediate steps of creating a bundle and determining its output location would be nice. Having this example also seems important, given all the magic that happens with the dev server.

[smallnamespace]

I have snowpack.config.js inside @app/client, with monorepo sibling packages under @app/* in a Yarn workspaces.

It seems to work even without explicitly setting root or workspaceRoot. I haven't noticed any difference when setting those options either, although I haven't extensively tested e.g. HMR when sibling packages change.

[crobinson42]

This is our setup also, so far, it's working well. We use lerna

[walkermalling]

I appreciate the response, and I see that there is a monorepo solution, but it requires yarn and workspaces. At the most basic level, I expect snowpack to be able to work with typescript project references, which are how typescript understands how to reference separate projects in a single repo. if I declare a reference to a different directory in my tsconfig.json, the plugin-typescript should resolve the path correctly. That doesn't seem to be working. Or perhaps there is some corresponding configuration needed in snowpack, but I have no idea what that is. (As an example, if I set this up, it compiles fine with tsc --build, but snowpack returns a 404 for modules in the referenced directory, and if I bundle and serve via express, I get an error that the referenced file has the wrong mime type. It's as though I need to mount the referenced project... but there docs don't really explain how mount works. "Mount local directories to custom URLs in your built application." Ok, but what is the relationship between referenced modules and mounted directories?)