Fork me on GitHub
#clojurescript
<
2019-11-10
>
ec17:11:42

I am trying to use reagent with slatejs using shadow-cljs like this

clojure
(ns starter.core
    (:require [reagent.core :as r]
              ["slate-react" :refer (Editor)]))

(defn app []
  [:> Editor])

(defn start []
  (js/console.log "Starting...")
  (r/render [app]
            (.getElementById js/document "app")))
But I am getting document is undefined error

Peter Muys18:11:53

Hello, This weekend I started playing with shadow-cljs because I would like to use firebase, but I have a problem with static resources. I have another lein project that generates and bundles css files, fonts, images. I would like to use these resources in my shadow-cljs app, but it doesn’t seem to work. If I look in the jar files of the library, I can see all my resources, but if I reference the css in my index.hml, it doesn’t find it. Is this a limitation of shadow-cljs or am I missing something? Thanks.

darwin18:11:51

shadow-cljs classpath | tr ':' '\n', do you see your jar in the list?

Peter Muys18:11:43

Yes, I see it, also the functions defined in the library can be called from the shadow-cljs app

lilactown19:11:43

I'm assuming you're using the default dev http server. Your static resources need to be wherever your folder that's being served is (e.g. resources/public in your app)

lilactown19:11:48

If you are serving it from your own webserver, you'll need to set it up so that it will serve those static files from the classpath

Peter Muys19:11:06

I am just using shadow-cljs watch app

Peter Muys19:11:43

But I would assume that it will include the resources in dependencies.

lilactown19:11:02

No, it won't. How would it know to?

lilactown19:11:36

Like, how would you deploy an app with those static assets on the classpath?

Peter Muys19:11:43

Wel, it is just a file on the classpath

Peter Muys19:11:03

So how can I solve this problem?

Peter Muys19:11:38

Do I have to copy it manually?

lilactown19:11:53

That is one option yes. It is the simplest

lilactown19:11:43

Another would be to create your own Clojure web server to serve your files instead of using Shadow's built in one

lilactown19:11:02

I would think about how you want to deploy your app, and work backward from there

lilactown19:11:19

If you're going to e.g. copy the built app to some static host (s3 or whatever), then I would create a function to copy those files from the classpath into the directory of files you're going to upload

lilactown19:11:47

And then serve that directory using Shadow's dev http server like you are now

lilactown19:11:41

If you were going to deploy it as part of a server side Clojure application, then I would setup that application to resolve static resources to those resources on the classpath

lilactown19:11:23

But shadow can't assume that you want to serve or deploy every file that shows up on the classpath. That could be potentially insecure, and fraught with gotchas and errors

lilactown19:11:29

Does that make sense?

darwin19:11:52

There is :roots option in the dev-http config

darwin19:11:43

youc an use classpath:relative-path notation, to add extra roots from your jar

Peter Muys19:11:16

Thanks for the reply. I would like to deploy to firebase hosting, so my own server is not an option. How do other component libraries solve this? My point of having this other library was to reuse components and logo's, ... I can't imagine that I am the only one with this problem.

Peter Muys19:11:00

Hi darwin, Also thanks for the reply, going to take a look.

darwin19:11:42

but this is obviously only development-time setup, as @lilactown wrote, for deployment you probably don’t want to use anything like shadow-cljs dev server

lilactown19:11:18

CLJS libs typically don't distribute static assets. With npm libs, it's best to copy the files from node_modules

Peter Muys19:11:32

Are you saying that I could make the target of the library a npm package with resources?

lilactown19:11:42

I don't think that's relevant to what you want to do

lilactown19:11:40

You could do that but you'd have all sorts of other issues, and it wouldn't solve your current problem

Peter Muys19:11:00

So if cljs libs don't have static resources, how do clojurescript component libraries have there own css resources bundled?

lilactown19:11:40

I don't know of any popular CLJS component libraries so I don't think it comes up

lilactown19:11:57

Probably, "here's the CSS, copy it to your public folder"

Peter Muys19:11:39

recomp is a reagent component library, but i don't think it uses shadow-cljs.

lilactown19:11:51

It uses whatever you install it in

lilactown19:11:02

It says to copy the assets to your app

Peter Muys19:11:12

yep, I also see it.

Peter Muys20:11:52

I thought I didn't see a config option or something, but it seems that the only options I have is to copy the files or create links to the files. Thanks everyone for the replies.