Are there docs/examples of building the FCL for distribution? We do not use REACT in our project, so we’re looking for an alternative to the kitty-items demo that uses cra and “react-script build.” Anything using Webpack or preferably something other than Webpack, such as rollup, esbuild, bower, or even require? We need to bundle the FCL and get it to the client–would love to not have to start from the ground up!
1 Like
OK, an update on this topic. First, I notice nobody has replied, which means either nobody knows how to build the FCL or nobody cares how to do it outside the react framework. Notice the kittyitems demo is built via react cra–obviously by very skilled engineer(s)–it’s a thing of beauty. But we can’t use it because we don’t do react – we’re just mortals and we’re not dedicating our lives to the zuckerverse. React is so complicated they needed a cra for anybody to use it, and that a.) admits it’s too complicated; and b.) makes our situation worse by hiding all the working parts.
The problem with the build appears to be that FCL requires client-side access to node.js builtins ‘http’, ‘https’, and ‘url’. These are buried somewhere deep in the dependency tree.
We want a simple IIFE. Rollup.js can’t bundle this stuff because the built-ins are too complex–their docs dwindle down to some moldy repos that haven’t been touched in 5 years.
Next stop, webpack. Damn.
Have a nice day up there on SugarMountain!
Hi @hier07, I understand you are having problems bundling FCL for production using a non-React solution. @gregsantos could you give us a hand?
Thanks Bruno, Thanks Greg,
Yes, I’ve been building from the kittyitems demo, but I cannot use react for this project. No problem integrating the server components into my project and it’s awesome.
But on the client side, the FCL depends on various node.js builtins, especially http, https, and url, as well as their dependencies on streams. In the kittyitems demo, the bundle delivered to the client contains these resources along with the fcl; however, the build itself is handled via the react-cra and I haven’t been able to deconstruct that and translate to a non-react bundler such as webpack, rollup, etc. I was working with rollup, but found that it quickly lead into obsolete polyfill repos that haven’t been maintained. It appears that rollup is backing away from nodejs polyfills due to complexity and maintenance issues. And there are some rumblings that webpack may be distancing themselves from the polyfill quagmire as well. I did find a svelte implementation that works, but I need a solution for a node server. So I’m looking at webpack today, and feeling pretty good, having found a bunch of other devs on discord working on the same.
However, I think this is an issue that the Flow community should address more officially as part of basic fcl support–this is a long-term critical path issue and shouldn’t be left as a react-cra dependency.
BTW, here’s the svelte example from @bluesign: https://github.com/bluesign/fcl-svelte-rollup. This thing is awesome–got a complete little working example right there in a box. I’d love to see the exact same thing done for webpack and rollup (if possible). If I get webpack working today this is what I’ll be aiming for.
Thanks!
I see you are using Svelte, If you are starting a new project from scratch you could Nuxt.js (Vue) to declare a client-only plugin and make FCL available in any page. Checkout this example menta - CodeSandbox
1 Like
That’s cool! So now you have examples for react-cra, svelte, and nuxt/vue. Today I put up an example for node.js, bundled using webpack. I set it up here: https://github.com/geocertify/fcl-client-via-webpack. This one borrows from @bluesign, using the same cadence script.
2 Likes