Fork me on GitHub
#reitit
<
2018-10-27
>
pez10:10:00

Hello, I am trying to add reitit to the reagent-template. But I get stuck on getting the handler to return anything else than a 404. This is the definition of my app:

(ns b.handler
  (:require [reitit.ring :as reitit-ring]
            [b.middleware :refer [middleware]]
            [hiccup.page :refer [include-js include-css html5]]
            [config.core :refer [env]]))

(def mount-target
  [:div#app
   [:h3 "ClojureScript has not been compiled!"]
   [:p "please run "
    [:b "lein figwheel"]
    " in order to start the compiler"]])

(defn head []
  [:head
   [:meta {:charset "utf-8"}]
   [:meta {:name "viewport"
           :content "width=device-width, initial-scale=1"}]
   (include-css (if (env :dev) "/css/site.css" "/css/site.min.css"))])

(defn loading-page []
  (html5
   (head)
   [:body {:class "body-container"}
    mount-target
    (include-js "/js/app.js")]))


(defn index-handler
  [_request]
  {:status 200
   :headers {"Content-Type" "text/html"}
   :body (loading-page)})

(def about-handler index-handler)
(def items-handler index-handler)
(def item-handler index-handler)

(def app
  (reitit-ring/ring-handler
   (reitit-ring/router
    ["/"
     ["" {:get {:handler index-handler}}
      "items" ["" {:get {:handler items-handler}}
               ["/item-:item-id" {:get {:handler item-handler}}]]
      "about" {:get {:handler about-handler}}]]
    {:data {:middleware middleware}})
   (reitit-ring/routes
    (reitit-ring/create-resource-handler {:path "/" :root "/public"})
    (reitit-ring/create-default-handler))))
and middleware is:
(def middleware
  [wrap-params
   wrap-content-type
   wrap-exceptions
   wrap-reload])

ikitommi11:10:08

@pez the route syntax is not right, It should be either:

;; nested
[["/" {:get {:handler index-handler}}]
 ["/items"
  ["" {:get {:handler items-handler}}]
  ["/:item-id" {:get {:handler item-handler}}]]
 ["/about" {:get {:handler about-handler}}]]
or:
;; flattened
[["/" {:get {:handler index-handler}}]
 ["/items" {:get {:handler items-handler}}]
 ["/items/:item-id" {:get {:handler item-handler}}]
 ["/about" {:get {:handler about-handler}}]]

ikitommi11:10:45

if there is no other route meta-data, it can be shortened to:

[["/" {:get index-handler}]
 ["/items" {:get items-handler}]
 ["/items/:item-id" {:get item-handler}]
 ["/about" {:get about-handler}]]

ikitommi11:10:28

currentlty, the path-parameters need to fill the whole path segments, so "/item-:item-id" doesn’t work.

pez11:10:06

Thanks! I just noticed that if remove the item-handler entry things start to work.

pez11:10:54

Trying to understand what you are telling me… Can’t I supprt a path like “/item-2”?

ikitommi11:10:07

Tries to spec the route data format, but the errors were so hairy, that I didn’t help. Need to add some hand-crafted validation for that.

ikitommi11:10:38

no, it can’t out-of-the-box (like Compojure, right?)

ikitommi11:10:02

one could add a custom coercion to remove the item- part from that.

ikitommi11:10:59

((compojure.core/GET "/item-:id" [id]
   (str id))
  {:request-method :get, :uri "item-2"})
; nil

pez11:10:17

I have a PR pending that takes the reagent-template from Compojure to Bidi, but then decided I’d rather take it all the way to reitit.

ikitommi11:10:48

Hmm.. actually, that works with Compojure:

((compojure.core/GET "/item-:id" [id]
   (str id))
  {:request-method :get, :uri "/item-2"})
; {:status 200, :headers {"Content-Type" "text/html; charset=utf-8"}, :body "2"}

pez11:10:50

Cool. But the item-:item-id syntax is not important. I’ll go for item/:item-id to keep the template simple.

ikitommi11:10:46

agree, it’s simpler. working on with error messages and route debugger right now. trying to make thing user-friendly

pez11:10:46

items/:item-id even 😃

pez11:10:10

Some kind of debugging middleware, maybe would be helpful for the problem I stumbled upon here.

pez11:10:55

Big THANKS for getting me unstuck with this. I was getting bald.

ikitommi11:10:33

you can ask the route-table from a router to see what routes are there and there is small guide on how to debug mw (https://metosin.github.io/reitit/ring/transforming_middleware_chain.html). But we can do much better! goal is to provide a small web-socket based debugger with routes visualized and a step-debugger for requests: how did each step (mw/interceptor) change the request.

ikitommi11:10:46

happy to help.

pez11:10:51

Now, I’ll continue with reitit in the frontend. 😃

pez11:10:34

Looking forward to that debugger. I had similar problems with bidi when I started with it. Just getting used to the syntax.

ikitommi13:10:10

not yet a stop-debugger, but visualization seems easy: https://twitter.com/ikitommi/status/1056175691480342533

pez19:10:40

Now the PR is pulled and a new version of the reagent template pushed. So to get started with a project using reitit both for the client and the server you can run lein new reagent <project-name>. Any input on the usage of reitit in the template is still, and always, welcome.