This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-22
Channels
- # architecture (1)
- # aws (3)
- # beginners (78)
- # boot (33)
- # cider (49)
- # cljs-dev (3)
- # clojure (82)
- # clojure-berlin (2)
- # clojure-dusseldorf (14)
- # clojure-gamedev (75)
- # clojure-italy (15)
- # clojure-nl (2)
- # clojure-poland (9)
- # clojure-russia (1)
- # clojure-spec (11)
- # clojure-uk (91)
- # clojurescript (17)
- # core-async (2)
- # cursive (1)
- # data-science (3)
- # datascript (34)
- # datomic (13)
- # docs (2)
- # duct (32)
- # emacs (8)
- # fulcro (95)
- # instaparse (17)
- # jobs (2)
- # jobs-discuss (1)
- # jobs-rus (4)
- # leiningen (1)
- # luminus (1)
- # lumo (4)
- # mount (1)
- # nrepl (1)
- # off-topic (98)
- # onyx (13)
- # portkey (12)
- # re-frame (10)
- # reagent (11)
- # remote-jobs (4)
- # rum (3)
- # shadow-cljs (34)
- # specter (7)
- # sql (1)
- # tools-deps (8)
@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)))
I already stop/clean/start figwheel and I add one more hr
to check if it's cache problems.
- I followed this tutorial https://github.com/fulcrologic/fulcro#full-stack
- I'm checking on network from browser@souenzzo what you mean by not sending its query? sending where?
@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
@cjmurphy I think the query would work directly as he did, but normalisation would not, which is a not good already
@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}))
this server-property-or-ident
can be my problem?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
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 😜
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))
Thanks @tony.kay — getting there. My ring foo not strong 😞. For file-response — something like (ring.middleware.resource/resource-request req "index.html")
?
modify the URI in the req
. The second parameter would be something like “public”…the folder where your index.html is (relative to classpath)
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
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] ...)
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
@donmullen updated dev guide. If you could proofread http://book.fulcrologic.com/#_adding_to_the_ring_stack I’d appreciate it.
@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…
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.
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
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}
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"
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.