Live dev environment

Was just considering the DX of working on FAB-level plugins after chatting to a few folks this week about the potential for this “FAB server layer” to form a really interesting layer of functionality & caching, between your user & your upstream API server. Starting with this thought bubble, but I realised that the workflow for building this kinda sucks:

Let’s say you update one of your FAB plugins, and want to test it:

• If you’re changing your client-side code as well, you need to yarn build:fab to build both your app and the FAB. Even for simple apps, that takes a little while.
• If you’ve only changed the FAB server component, yarn fab:build will do it and is fairly quick, but then you do need to rekick your fab serve fab.zip process and refresh the browser.

Was thinking a different workflow, but I wanted to put it out there to see what people thought of it before I lock down an api:

fab dev-server --proxy=3000 --port=3001

This would read your fab.config.json5 file, find all the plugins you’re using, ignore (somehow, see below) input-{static,nextjs,sapper}, and things like plugin-rewire-assets, and actually plugin-render-html, since they’re really tied to the compiled FAB. But it would live-reload the remaining plugins, and forward requests onto http://localhost:3000.

This should mean you load http://localhost:3001 as if it’s your normal dev environment, but requests are moving through the FAB server code, meaning things like /api/graphql could be caught and all their logic iterated on. Hot module loading should still work with Webpack’s dev server for client-side changes.

I’d need to stub out the cache module that I’m planning on introducing as part of RC2, which actually gives me a good way to dev on that, so I think this is going to happen.

Plus, I want to run fab.dev/blog as a server-rendered React Notion proxy so I can start to wean myself off gatsby. This would be a good way to test that.

[taybenlor]

Hey @taybenlor, this is so so cool! @geelen and I have talked about exactly this use-case so often. We just haven’t found the time to actually build it. Do you have this somewhere publicly where we can take a look at it? Would love to see it.

Thanks! I genuinely think it’s an interesting direction for web app development to go, especially as an architecture for “web apps on the edge”. Unfortunately nothing I’m able to show publicly yet - but my MVP should be stood up in the next month or two and then I’d be happy to walk you through it.

[evanderkoogh]

Yeah, Deno looks like it is very much a nodejs alternative, with native typescript, build on more web APIs and without relying on a central NPM registry.

Theoretically it should be possible to run FAB in Deno, but the last time I tried to use one of their pre-release candidates the fetch stuff didn’t follow the web standard in a bunch of major ways and I gave up pretty quickly. One schools open up back in Melbourne and I don’t know what I should do with my time anymore I may find the time to give it a go again in my then copious spare time 😄