This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-03-25
Channels
- # announcements (2)
- # beginners (30)
- # biff (12)
- # calva (2)
- # cider (62)
- # clerk (18)
- # clj-commons (20)
- # clojure (9)
- # clojure-europe (6)
- # clojure-switzerland (1)
- # core-logic (6)
- # datomic (4)
- # events (3)
- # fulcro (1)
- # membrane (15)
- # off-topic (16)
- # portal (24)
- # practicalli (2)
- # releases (1)
- # rewrite-clj (45)
- # shadow-cljs (14)
- # tools-build (1)
- # xtdb (4)
More child problems, this time with cross-origin
So I know biff has some stuff built in re: CORS but I can't find anything on exactly how it works. Now that I'm messing around with htmx I'm getting 400 errors; is it more likely that I'm not adding a needed option to some of the markup, or that I need to tell the server side to do it differently?
CSRF seems to be going out with requests appropriately, and I've gotten to here I'm getting a 406 error "Not Appropriate" (lol). This seems to have to do with the content-types I'm asking for?? Accept / Accept-Encoding gzip, deflate, br Accept-Language en-US,en;q=0.5 All looks kosher to me...
IIRC 406 usually happens when your ring handler returns nil--I would check for that first.
Biff doesn't provide any CORS stuff out of the box (you're probably thinking about CSRF anyway), but if you did need to allow CORS (e.g. you want to provide an API that other sites can use on the client side), you can throw in the https://github.com/r0man/ring-cors middleware.
For CSRF: again if you're getting a 406 then you've probably just got a handler returning nil, but FYI CSRF for htmx is handled by https://github.com/jacobobryant/biff/blob/3ebd0ef86f39ddeeaf05cea778622464969fdeeb/example/src/com/example/ui.clj#L38. That'll inject the CSRF token into any htmx requests that are triggered from a descendant element. For regular form posts, the biff/form
functions includes the CSRF token.
(Though if you have a page that isn't wrapped by <your main ns>.ui/page
, you'll need to put the :hx-headers
thing somewhere yourself)
I'm making some updates to the https://biffweb.com/docs/reference/project-structure/ -- anything that would be helpful for me to write about? (even if it wouldn't necessarily go in the "reference" section) I've just gone over the docs a bit, and a few rough notes I have so far are: • merge "project structure" and "system composition" into a single "architecture" section. Update it to reflect https://clojurians.slack.com/archives/C013Y4VG20J/p1679172065159119 (i.e. biff/start-system being deprecated). Have it mainly talk about plugins + components + the system map. Maybe include a word of warning: plugins and components are easily swappable; the overall architecture/dependency injection setup may not be. Also, while ~everything in biff is meant to be replaceable/modifiable, generally the idea is for this to happen gradually as your project grows--if your immediate thought is "I'll start out by swapping out X, Y and Z", then you might be better off writing your app from scratch, the "regular" clojure way, instead of using Biff. (especially if one of X, Y, or Z is "the overall architecture/dependency injection setup") • minor updates to schema and query sections • expand on the htmx section. Give a better conceptual introduction to htmx, and talk about various approaches to doing frontend stuff (e.g. it doesn't hurt to include a JS file somewhere--in fact I maybe should just have that be part of the template project, since I always have a custom JS file somewhere in my own apps). If worst comes to worst you can even throw in an NPM build pipeline with webpack (e.g. if you want to use some existing NPM libs), without going all the way to SPA land. In general I think a progression like this makes sense (start at the left, and move to the right as your requirements become more stringent): pure htmx -> add some hyperscript one-liners -> add a JS file somewhere (plain JS, no build pipeline) -> use alpine.js to "un-jquery-ify" your JS code/make your UI more declarative + reactive -> add webpack/JS build pipeline -> give up and start using react (possibly with CLJS, why not) • add a section about config + secrets • add a section about developing in prod • maybe expand the authentication section into a "security" section that also talks about using middleware for authorization, and also CSRF + any other random stuff that comes up. Soon I'll also update the tutorial + accompanying repo so it uses the latest version of biff. eventually I'd also like to write some how-to articles and background info/essays/FAQs.

I think those are good directions to go; especially the how-to-include-js part. Selfishly, I'd love to see something that explains how to go from the schema definitions meant for xtdb docs to malli instrumentation of functions called-with or returning those types. It's on my list, and my first stab at it ran into some stack-blowing recursion; I found the part of the malli docs I likely need to understand and apply to fix that, but haven't gotten around to it.
Ah that would be handy, I'll add it to the list.
oh, I also have a note to make the tutorial give some more explanation about tx listeners + websockets
speaking of which, maybe I should have the htmx reference section mention websockets, oh it already does
I have nothing specific to add, but more how htmx and Biff interact would be most welcomed.
👍 sounds good!