clojurescript 2021-09-28

Luciano Laratelli00:09:51

Hey everyone, I’m trying to serve some compiled cljs via a reitit.ring resource handler, but the site is not loading when I go to the address the resource handler is at. This is the relevant part of my shadow-cljs.edn:

:builds
 {:mccrossin
  {:target :browser
   :output-dir "public/js"
   :asset-path "js"
   :compiler-options {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}
                      :output-featureset :es2020}
   :modules {:main {:init-fn mccrossin.frontend/main
                    :preloads [re-frisk.preload]}}
   :devtools {:http-root "public"
              :http-port 3000}}}

If I run the project via CIDER, it works fine (at localhost:3000). My problem comes about when I copy public into the resources directory of another clojure project, the one that has the server with the resource handler. Here’s the server definition with the resource handler:

(ns server.core
  (:gen-class)
  (:require [org.httpkit.server :as server]
            [reitit.ring :as ring]))

(defn -main
  [& _]
  (let [port 2222]
    (server/run-server
     (ring/ring-handler
      (ring/router
       ["/emailform" mail-handler])
      (ring/routes
       (ring/create-resource-handler {:path "/"})))
     {:port port})))

So when I go to localhost:2222 , the page doesn’t load. Curiously enough, the re-frisk stuff does. I think the routing is correct: when I load localhost:2222 , it routes to localhost:2222/index.html and I can inspect the html and see what I’m expecting, but the js doesn’t load. If I check re-frisk, I see that the app-db is empty. Is this an issue with the way I’ve got my build set up?

Apple01:09:04

Open devtools in your browser and check network tab. Does your .js file load?

Luciano Laratelli03:09:41

Yup, I see a GET for it and a 200 response from the server

thheller05:09:45

@U01RN86SL90 maybe read https://code.thheller.com/blog/shadow-cljs/2021/05/13/paths-paths-paths.html

thheller05:09:14

I suspect you want :output-dir "resources/public/js" in your shadow-cljs build config

thheller05:09:32

and then (ring/create-resource-handler {:path "public"})

thheller06:09:41

you should never ever use :path "/" in a resource handler. that'll make your entire codebase accessible over http

Luciano Laratelli22:09:16

That didn’t have the intended effect — now not even the re-frisk overlay loads

Apple02:09:46

"200 response" is good. When you click the response tab do you see a js file returned?

Luciano Laratelli21:09:12

@UP82LQR9N yes I do. Sorry for the delayed response 😅

Apple23:09:00

"I can inspect the html and see what I’m expecting, but the js doesn’t load." "When you click the response tab do you see a js file returned?" "you do" Sounds like the js loads. To tshoot, what if you just add (.log js/console "hello world") to your code and see if you see it in both :2222 and :3000 server? Perhaps there was caching for :3000 server? Not much idea left.

Luciano Laratelli20:10:11

Hm… I see the log on both 2222 and 3000

Luciano Laratelli21:10:51

A friend helped me figure this out. The issue was that the backend router was not in agreement with the frontend router; I was missing a route for / and a not-found-handler Thanks for the help apple and thheller 🙂

hbprince00:09:26

is there anyway to inject values in html file when on dev server ? these html files are rendered from server on prod using JINJA template syntax rendered values are mostly oauth2 signed url or session id when developing cljs frontend, i want to replace or inject values in html files, is it possible?

Apple01:09:10

https://github.com/yogthos/Selmer

hbprince03:09:42

any hint on how to use this with shadowcljs conf?

hbprince03:09:56

i mean with dev server

p-himik08:09:28

shadow-cljs dev server is a very simple thing. If it finds a file, it serves it. If it doesn't find it - it either tries to find index.html instead or it calls a custom handler function if you provide it. If you want custom behavior, your can make sure that it doesn't find the files you want to pre-process and instead you can do all the work in that custom handler. But at this point, you should just stop using shadow-cljs dev server and switch to the server you're using in production, with maybe a custom config for development.

hbprince09:09:05

okey :thumbsup: any example for a custom handler that use ^Selmer?

hbprince09:09:25

having a custom handler seems good to me 🙂

p-himik09:09:07

Doubt you'll find any shadow-cljs-specific example but any other example can be trivially adjusted. Shadow-cljs documentation has info on how to use such handlers in general.

👍 1

2021-09-28

Channels