console VS pkg

>https://console-preview.oxide.computer/

That's pretty cool! The design language is a nice touch for sure.

I've used Storybook during development for a while now and the use case you present is how the Storybook is pitched. I actually agree about the simplicity of discovering the components. What I disagree with, though, is that I can't see value of "develop & test your UI independently from your app" part. It forces me to decouple the state from a component and this in turn adds unnecessary complexity to the architecture.

I'm going to use Oxide console [1] as an example because it has a really good setup of MSW + OpenAPI autogenerated mocks (which means that it doesn't need any complete backend, just a defined contract).

Consider this fairly simple page [2]. If I'm using the Storybook pattern, I'm keeping all of the state outside of the component, which means I now have to manually memoize every single variable defined before the return to make sure that the component doesn't do any unnecessary re-renders. This includes `intervalPicker`, `commonProps`, `setFilterId`, every return of `useDateTimeRangePicker`. With MSW I have benefits not needing the API, testing in real production app, using the same exact mocks for unit tests and development.

[1]: https://github.com/oxidecomputer/console

[2]: https://github.com/oxidecomputer/console/blob/main/app/pages...

SPA mode (what I assume you mean by BFF mode) is brand new, so almost nobody has used it. However, a close example would be the Oxide web console, which we build as an SPA because we want to serve it as static assets from a Rust backend. It's very close to your suggested stack: React + React Router + Tanstack query + zustand, though importantly we also use React Router's loaders to give the app a better-than-SPA feel on navigations. I do plan on moving it to Remix SPA mode when I get a chance, but like I said the result should be very similar so it's not that high a priority for me. If I were starting from scratch I'd probably use Remix SPA.

Repo: https://github.com/oxidecomputer/console/

Live demo here with in-browser MSW mock API: https://oxide-console-preview.vercel.app

VPS providers are nice, but they don't provide the same cloud-level capabilities that Oxide offers. Check out the console to get an idea of what I mean (this is a demo with mock data): https://oxide-console-preview.vercel.app/

Yeah, basically. We do it with a function call where the argument to the function is that interface representing all the API endpoints. `makeHandlers` handles parsing path params, query params, and request body and passes them to each endpoint handler. So the runtime validation of request bodies is also generated — we generate a zod schema for each request body in the OpenAPI definition and use it to parse the actual request body that comes in.

big function call https://github.com/oxidecomputer/console/blob/bd65b9da7019ad...

automatic body parsing and argument passing: https://github.com/oxidecomputer/console/blob/bd65b9da7019ad...

When an endpoint gets added to the spec, we can rerun the generator and get type errors in the `makeHandlers` telling us endpdoints are missing.

I don't remember the details, and cannot find my notes on vercel/pkg. But looking at https://github.com/vercel/pkg right now I see the project has been deprecated in favour of single-executable-applications

> Standalone CLI — we haven’t worked on a standalone CLI for the new engine yet, but will absolutely have it before the v4.0 release.

This part is the most exciting to me. Given the rest of the release announcement, I'm assuming this means that it'll be built in Rust rather than embed Node. While I'm not a Rust zealot of anything, I'm very partial to not embedding Node. Particularly when it depends on using Vercel's now-abandoned pkg[1] tool.`

[1] https://github.com/vercel/pkg

The npm package called "pkg" seems to be the standard for packaging NodeJS applications

https://www.npmjs.com/package/pkg

Unfortunately you also need to bundle all your code into a single file for it to work, but you can use any bundler (webpack, parcel, etc) you want at least

Nodejs support for "single executable applications" is getting there - this issue below is preventing wider adoption at the moment:

"The single executable application feature currently only supports running a single embedded script using the CommonJS module system."

https://nodejs.org/api/single-executable-applications.html

Should be an awesome game changer for node.js when the feature gets rounded out.

Also check out vercel's `pkg`: https://github.com/vercel/pkg/issues/1291

Yes, you can. Check out pkg for a fun option, which can package up your project and Node.js into a single executable.

Further, you could experiment with the pkg tool that allows you to package up Node JS, your source, and your dependencies into one single executable for easy distribution.

package the app using https://github.com/vercel/pkg and use a smaller base image like alpine, busybox or even scratch (if possible)

Check this thread: https://github.com/vercel/pkg/issues/1685