crisp-react VS nx

If TypeScript doesn't put you off (it's really a good choice for both backend and frontend), have a look at Crisp React.

Ability to handle a monorepo with 2 builds depends on a particular monorepo. For example, Crisp React (https://github.com/winwiz1/crisp-react) has 2 logical projects: server (https://github.com/winwiz1/crisp-react/server) and client (https://github.com/winwiz1/crisp-react/client). Each project can be built separately. And this is the website built (both projects used) and deployed automatically by Cloudflare Pages: https://jamstack.winwiz1.com

You can use Crisp React to split a monolythic React SPA into several SPAs. Each SPA will have its own instance of React Router that is aware of the several pages that belong to that particular SPA.

The VM resorces such as CPU and memory should be used to handle API calls and return data. That's in case some webpages are dynamic and require API data. All static assetts including images are better to be served by a CDN. Which means your VM will serve the static assets to the CDN data centers and not to end users. Example: this website or that.

For deployment you can use Docker multi-staged build to ensure the backend run-time environment doesn't contain the client build-time dependencies e.g. client/node_modules/. It improves security and reduces container's storage footprint. An example for React client and node server is here. Although this has nothing to do with code/types sharing.

https://github.com/winwiz1/crisp-react/blob/master/docs/benc...

Tailwind is powerful, consistent and comprehensive but again the advantages come not without a drawback: In order to use it effectively one needs to learn/memorise yet another CSS. I have better things to do and think it's more efficient to use a set of CSS management approaches:

Crisp React uses the same Express server in production and debugging (for full stack builds only).

The alternative approach is to use not many but several tools in a manner that utilises advantages while minimising drawbacks. You can read about it here, scroll down to the CSS bullet.

You can have Login/authentication SPA, Reporting SPA, etc. Each SPA does its own routing as demonstrated here.

One notable feature is the ability to remember selected tabs. When you select a specific tab on a page, all other tabs on the page with the same name will also be selected. This selection will persist during your next visit to nx.dev.

Hono does have a template application for Vercel, but in my case, my requirements were different (aren't they always 😅). I was working in a monorepo (using nx) because I wanted to manage my libs, tests, and examples all together in a single place, instead of having different repos.

Recently, My coworker is using Nx to automate his workflow, including automated release using semantic version. I found this method quite useful, so I want to re-implement on single GitHub repositories (without Nx).

I started a discussion on GitHub concerning that subject: Design Nx Plugin Project Crystal

Nx

We are looking for companies to partner with on the Analog project to support development of the project. Thanks to Snyder Technologies for being an early adopter and promoter of Analog, Nx for joining us as a sponsor, House of Angular, and many other backers of the project.

Additionally, thank you to all our community launch partners across the frontend ecosystem for helping us bring Storybook 8 to the world! Thanks to Chromatic, Figma, ViteConf, Omlet, DivRiots, story.to.design, StackBlitz, UXpin, Nx, Mock Service Worker, Anima, Zeplin, zeroheight, kickstartDS, and Kendo UI.

The advent of esbuild, the native support for ES Modules in browsers, the widespread adoption of import map, the emergence of tools like Native Federation, and the Nx ecosystem all combine to forge a flexible and well-maintained Micro Frontend Architecture.