How to get devcards working with shadow-cljs

Question

How to get devcards working with shadow-cljs

960 Views Asked by Chris Murphy At 19 April 2025 at 14:16

My devcards used to work with Figwheel. However I can't get them to display with shadow-cljs.

Shadow emits this message:

shadow-cljs - HTTP server for :cards available at http://localhost:3450

The namespace cards.card-ui is just a series of requires.

I have a println message in cards.card-ui that is being displayed.

In shadow-cljs.edn I have two :builds. This is the second one:

      :cards {:target           :browser
              :output-dir       "resources/public/js/cards"
              :asset-path       "js/cards"
              :modules          {:main {:entries [cards.card-ui]}}
              :compiler-options {:static-fns false}
              :devtools         {:http-root          "resources/public"
                                 :http-resource-root "resources/public"
                                 :http-port          3450
                                 :http-handler       shadow.http.push-state/handle
                                 :push-state/index   "cards.html"
                                 :preloads           [devtools.preload
                                                      default-db-format.preload]}
              :dev              {:compiler-options {:devcards true}}
              }

cards.html has a body tag that has a div tag that has id "app". I take the browser to http://localhost:3450/cards.html and just get a blank page. My best theory is that the cards.card-ui namespace is not being mounted at app.

Original Q&A

There are 1 best solutions below

**Chris Murphy** · Answer 1

Currently the only way to get an example Fulcro application that uses shadow-cljs rather than Figwheel is via the lein template. So at the command prompt:

lein new fulcro app shadow-cljs

Here app is any name you choose and shadow-cljs is an option. After studying the resultant application I realised that the namespace cards.card-ui should not just be a list of requires, but needs to have these lines as well:

(devcards.core/start-devcard-ui!)

(defn refresh []
  (println "In cards.card-ui that starts the ui"))

The :cards build in shadow-cljs.edn becomes a bit simpler:

      :cards {:target           :browser
              :output-dir       "resources/public/js/cards"
              :asset-path       "js/cards"
              :compiler-options {:devcards true}
              :modules          {:main
                                 {:entries [cards.card-ui]}}
              :devtools         {:after-load cards.card-ui/refresh
                                 :http-root "resources/public"
                                 :http-port 3450}
              }

Another thing I had wrong was the HTML (cards.html). Here is just the body tag of the markup:

<body>
    <div id="app"></div>
    <script src="js/cards/main.js"></script>
</body>

Some import pointers from the Devcards site: https://github.com/bhauman/devcards#usage-without-figwheel

The lein template project: https://github.com/fulcrologic/fulcro-lein-template

How to get devcards working with shadow-cljs

There are 1 best solutions below

Related Questions in FULCRO

Trending Questions

Popular # Hahtags

Popular Questions