Web Dev Rapid Recipe - Add Clojurescript to your Luminus project

First, add ClojureScript to your project.clj dependencies. The snippet to do this is documented here: https://github.com/clojure/clojurescript

Now add lein-cljsbuild to the project.clj plugins (not dependencies). Snippet here: https://github.com/emezeske/lein-cljsbuild

Then, from that same page, copy+paste the :cljsbuild {} part (from the "Basic Configuration" section). You will want to change:

• :source-paths to src/cljs. This is just so it's in src where it belongs.
• :output-to to target/cljsbuild/public/js/app.js.

Finally:

• edit :resource-paths, adding "target/cljsbuild"
• add the cljsbuild build hooks: :hooks [leiningen.cljsbuild]

Edit one of your HTML templates. Put this snippet where you want the script tag to be templated in:

  {% script "/js/app.js" %}

ⓘ the Selmer script tag is documented here: https://github.com/yogthos/Selmer#script

For your Hello World, add an empty div that you can add content to:

  <div id="dynamiccontent"></div>

Now make the directory for your Clojurescript code (edit "appname"):

mkdir -p src/cljs/appname/

Now create a new file core.cljs and write your Hello World code (edit "appname"):

(ns appname.core)

(let [container (.getElementById js/document "dynamiccontent")
      paragraph (.createElement js/document "p")]

  (set! (.-textContent paragraph) "Ultimate World!")
  (.appendChild container paragraph))

Restart your development server if it's running.

And run in an extra terminal:

lein cljsbuild auto

Now when you load your site in browser you should see your Hello World!

In the above example, the javascript just directly runs when the script loads.

However if you want to define functions that are called on certain events you can. There are two ways to do that:

So you want to write some code which will be available to both server and client.

This is fairly simple, we just make a new source directory and add it to both the Clojure and ClojureScript source-paths.

The convention for naming is:

Generally when writing cljc, you avoid using platform-specific code. But if you have to, you may use Reader Conditionals.

For the example, it's quite a lot so I just show you the git change: https://codeberg.org/xylon/cccl2/commit/a0d533578ff7c5da51331140c3c181c3772c8fc4

For AJAX you may use cljs-alax. I will let the project documentation speak for itself https://github.com/JulianBirch/cljs-ajax

Note that, if using Luminus, you don't need to manually convert to/from JSON, as the middleware will take care of that automatically.

Look back at the :cljsbuild map you added to project.clj.

:builds is a list, so you may simply add more builds.

You will have to add a :main key to control the entry-point of each script. Docs for compiler options here.

Miscelaneous notes.