@wilkerlucio oops, i thought we were in #fulcro

@levitanong you can use by installing the chrome extension, and bumping inspect to 2.2.0-SNAPSHOT

hehhe, no problem 🙂

haha, somehow i thought i was supposed to remove fulcro-inspect as a dep since it’s now a chrome extension

no, still need that, now it works mostly as a message broadcaster

ahhh, i’m getting Uncaught SyntaxError: Unexpected token <

and i haven’t added any stray < according to my git diff

did you tried cleaning the cache and recompiling? that's a weird erorr

afaik shadow-cljs cleans cache automatically. will do lein clean

ok, I'm gonna try it in a differnet app, I had tried one with figwheel, and the fulcro-inspect itself is in shadow

oh, it’s probably an issue on my end

my webserver is trying to serve html as js lol

I’m getting a cors issue now

shared.js:30 Uncaught DOMException: Blocked a frame with origin "" from accessing a cross-origin frame.
    at Ab ()
    at Function.rc.b ()
    at 

which version of shadow are you using?

Not the latest

Will try it out with latest shadow when I get to my office.

I gotta go sleep now, please let me know if figure that, I was able to run here on a shadow env too and it seems fine on version 2.3.21

Okay, will do! Good night!

if you can't get it to work, can you please open an issue with a reproduction example?

thanks, cya

@wilkerlucio Oh i was on 2.3.21, so it’s not shadow. Will see if i can reproduce it elsewhere

why this component isnt send it's query?

(defsc Root [this {:keys [n app/users]}]
  {:query         [:n {:app/users [:user/id :user/name]}]
   :initial-state {:n         0
                   :app/users []}}
  (dom/div
    (dom/div (str "Number: " n))
    (dom/button #js{:onClick #(prim/transact! this `[(app/bump {})])}
                "+")
    (dom/hr)
    (dom/hr)
    (map ui-user-card users)))

@souenzzo what you mean by not sending its query? sending where?

Sorry. On the server only [:n] arrives ( :app/users part just don't )

@souenzzo I don't see anything triggering a load on your code example, when are you requesting the load?

one problem that I'm seeing is that you are using the root directly, that's usually a bad thing, it's better to have a very clean Root component (that just links to your actual root), this way you can trigger the load on that field

otherwise you will have problems to load more than one thing at root query

Your query needs to have (get-query User) in it.

@souenzzo That's why only the [:n] part is arriving I would think.

@cjmurphy I think the query would work directly as he did, but normalisation would not, which is a not good already

Ok, it's a reaload issue that not affect render. (render updates with no problems)

@souenzzo can you share the code you are using to trigger the load? I think the problem might be there

:started-callback (fn [app]
                          (df/load app :n nil {:marker false}))

see, you are loading the key :n, that's why this is the only thing you see on the server

and you must send a component with the query, otherwise the normalization will not work

@souenzzo this is how I recommend you trying to setup your root:

(prim/defsc Root [this {:keys [n app/users]}]
  {:query         [:n {:app/users [:user/id :user/name]}]
   ; note it has an ident now
   :ident (fn [_] [::root :singleton])
   :initial-state {:n         0
                   :app/users []}}
  (dom/div
    (dom/div (str "Number: " n))
    (dom/button #js{:onClick #(prim/transact! this `[(app/bump {})])}
      "+")
    (dom/hr)
    (dom/hr)
    (map ui-user-card users)))

(def root-factory (prim/factory Root))

(prim/defsc RootContainer [this {:keys [ui/root]}]
  {:query [{:ui/root (prim/get-query Root)}]}
  (root-factory root))

; to do the load now
{:started-callback
 (fn [app] (df/load app :ui/root Root))}

I did something like that just not. Just cleaning/reseting everything before try again 🙂

and like @cjmurphy said, remember to pull the query of your users in the Root

Working! Tks!

I’ve gotten client-side html5 routing working. Still on *[fulcrologic/fulcro “2.2.0”]* and will likely update soon. I’d like to now add the ability to serve up a full URL (e.g. *<http://server.com/property/1*|server.com/property/1*>). Can a tap into the easy server do do this — or do I need to move toward adding my own server implementation?

@donmullen should work with easy server http://book.fulcrologic.com/#_adding_non_api_routes

Thanks @claudiu. Is this also applicable? http://book.fulcrologic.com/#_code_splitting_and_server_side_rendering

@donmullen you don’t have to use SSR at all…you can just serve index.html from every legal URI, and then use that URI (in started callback) once your app is started to change routes.

@tony.kay Thanks. Does ‘serve index.html from every legal URI’ mean adding :extra-routes to make-fulcro-server? If so, what would the :handler entries be? Once the client-side app starts in :started-callback, how do I grab the actual incoming URI? My started-callback function is currently just

(fn [{:keys [reconciler] :as app}]
                  (routing/start-routing (prim/app-root reconciler)))

@donmullen So, 1. I would not use extra routes. Add a component that injects handler, and add to the post-hook. 2. The URI is in js window.location…it’s a browser 😜

lol Doh!

yeah, it’s funny what we forget when in new environs 😉

http://book.fulcrologic.com/#_adding_to_the_ring_stack

you could add to pre-hook or post-hook…just look at the request and see if the URI matches legal routes that are serviced by your app

Something like this…you could use ring/resource to do the file-response bit:

(defrecord HTML5Routes [handler]
  c/Lifecycle
  (start [this]
    (let [old-pre-hook (fulcro.easy-server/get-pre-hook handler)
          new-hook     (fn [ring-handler] (fn [req] (if (is-html5-route? req) (file-response) ((old-pre-hook ring-handler) req)))]
      (fulcro.easy-server/set-pre-hook! handler new-hook))
    this)
  (stop [this] this))

and is-html5-route? is probably just a regex against the req uri

or have is-html5-route? use bidi/match-route?

Thanks @tony.kay — getting there. My ring foo not strong 😞. For file-response — something like (ring.middleware.resource/resource-request req "index.html") ?

@donmullen close

modify the URI in the req. The second parameter would be something like “public”…the folder where your index.html is (relative to classpath)

something like (resource-request (assoc req :uri "/index.html") "public")

I don’t remember if it is :uri or :url

Fantastic - thanks! It’s :uri

there’s almost nothing to Ring…the req, which is a map, is just being chained through functions. They can modify the req map and pass it down, or choose to generate a response, which is again just a map. That’s about it

the main thing that bends your brain a bit is knowing which function is which

e.g. which function is the one that is the “rest of the request processing chain”

in the plug-in, there’s an additional bit: the function that was originally the pre/post hook

so, there are three things to manage: the “rest of the chain”, which is ring-handler in the example, the prior value of the hook, which is old-pre-hook in the example, and your function (fn [req] ...)

so, you just make decisions, and call whatever composition of those makes sense

old-pre-hook was a function that took the ring handler and returned a function req -> resp that becomes the “rest of the stack”…thus the extra nesting

I should put all of that in the book 😜

@donmullen updated dev guide. If you could proofread http://book.fulcrologic.com/#_adding_to_the_ring_stack I’d appreciate it.

since you’re coding one up 🙂

@tony.kay - so (resource-request (assoc req :uri "/index.html") "public") resulted in a download of the index.html file… so I tried ((old-pre-hook ring-handler) (assoc req :uri "/index.html")) if it was a valid html5 route — and that also seems to be downloading (even about a complete restart). Hmm…

oh, no

all you have to do is set content type

sorry

didn’t realize it didn’t do that

try adding in (-> (resource-request... as before) (ring.util.response/content-type "text/html"))

I think pre-hook must be in front of the normal resource service and middleware that does the content type and modified headers.

might not need that if you do post-hook instead

hm…no…that’s strange…pre-hook is after those…I would have expected that to work

Oh…what was your request, come to think of it…the middleware can’t add content type if there isn’t an exension in the request to guess from

I was assuming you were hitting routes like “otherpage.html?params”…not the restful kinds of URIs like “location/1"..with the latter you’ll have to set the content type

@tony.kay - not seeing post-hook — fallback-hook? Note that I am on 2.2.0 — should probably upgrade. Yes, I’m using URIs like “location/1”. — Using above, adding content-type - results in display of blank html page - so something still not quite right.

yes, fallback is what I meant, but you don’t need to change that. pre-hook is fine for this

what do devtools tell you about what was served?

stuff has to match your classpath and such…I’m assuming you’re using resources/public/index.html for you index page, and that resources is on your classpath.

@tony.kay - so I had “index.html” instead of “/index.html”. The req coming in is

{:remote-addr "0:0:0:0:0:0:0:1", :headers {"host" "localhost:3000", "user-agent" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3433.0 Safari/537.36", "connection" "keep-alive", "upgrade-insecure-requests" "1", "pragma" "no-cache", "accept" "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8", "accept-language" "en-US,en;q=0.9", "accept-encoding" "gzip, deflate, br", "cache-control" "no-cache"}, :async-channel #object[org.httpkit.server.AsyncChannel 0x648b4dad "/0:0:0:0:0:0:0:1:3000<->/0:0:0:0:0:0:0:1:50899"], :server-port 3000, :content-length 0, :websocket? false, :content-type nil, :character-encoding "utf8", :uri "/property/3336460", :server-name "localhost", :query-string nil, :body nil, :scheme :http, :request-method :get}

And devtools shows GET 404 (Not Found)

that’s because your index.html uses relative paths on your js

browser thinks you loaded /property/3336460, so relative things would be relative to that…the rules of the web still don’t change 🙂

@tony.kay - thanks. Makes sense. Knowing this is likely an easy fix - I admit I don’t know what it is! Brain fried. Was so delighted to get html5 client-side routing working 12 hours ago 🙂.

@donmullen in your index.html…change your script tag from src="js/main/app.js" to src="/js/main/app.js"

lol! miracle — works - and I didn’t have to do anything on the client side.

Thanks again @tony.kay. I reviewed http://book.fulcrologic.com/#_adding_to_the_ring_stack — looks good. I’d switch the post-hook reference to fallback-hook and change the code as you indicated to add the content-type. Mention of relative paths in index.html also good for novices like me 🙂. Using (bidi/match-route url-route-mappings uri) was helpful for html5 routing check - as that code was already implemented — no extra regex code needed.

done. thanks