clojure: devcards: separating out main app

Question

Situation

I am using clojure + figwheel + devcards. https://www.youtube.com/watch?v=G7Z_g2fnEDg

Everything is great, except for the following problem:

• I can prototype UI components of my app. However, I don't want my full app to be inside a card.

  So in particular, I want the following:

localhost:8000/cards.html <-- show me all my namespaces + devcards localhost:8000/app.html <-- don't show me any devcards; don't show me the directory of devcards; just run my app

Question:

How do I get this setup? Almost everything I have read is about how to use devcards not how to setup a separate devcards vs main app distinction.

Thanks!

Answer 1

This is pretty much the default already for the devcards template (e.g. lein new devcards my-app).

Have more than one build in your project.clj. One for the devcards (note the different paths and the figwheel config). The dev is pretty much the default.

(This code is from the template):

 ; ...
 :builds [{:id "devcards"
           :source-paths ["src"]
           :figwheel { :devcards true  ;; <- note this
                      ;; :open-urls will pop open your application
                      ;; in the default browser once Figwheel has
                      ;; started and complied your application.
                      ;; Comment this out once it no longer serves you.
                      :open-urls ["http://localhost:3449/cards.html"]}
           :compiler { :main       "xxx.core"
                      :asset-path "js/compiled/devcards_out"
                      :output-to  "resources/public/js/compiled/xxx_devcards.js"
                      :output-dir "resources/public/js/compiled/devcards_out"
                      :source-map-timestamp true }}
          {:id "dev"
           :source-paths ["src"]
           :figwheel true
           :compiler {:main       "xxx.core"
                      :asset-path "js/compiled/out"
                      :output-to  "resources/public/js/compiled/xxx.js"
                      :output-dir "resources/public/js/compiled/out"
                      :source-map-timestamp true }}
           ;...

Now you need two different HTML files. One you are already using (the cards.html) and your app.html (or what the template is using: index.html). They load:

<script src="/js/compiled/xxx_devcards.js" type="text/javascript"></script>

The other:

<script src="/js/compiled/xxx.js" type="text/javascript"></script>

Note, that those are the two from :output-to.

Run this setup with lein figwheel dev devcards. Open both the index and the cards in your browser. Enjoy.

In practice it might be even better to separate that a bit more. You can do this, by either using different ns for your :main - or you can use multiple :source-paths.