Skip to content

Instantly share code, notes, and snippets.

@mmzsource
Last active August 11, 2023 00:43
Show Gist options
  • Save mmzsource/340322e6ff4b17be8b7dcb84d16d5172 to your computer and use it in GitHub Desktop.
Save mmzsource/340322e6ff4b17be8b7dcb84d16d5172 to your computer and use it in GitHub Desktop.
Setup dynamic Clojurescript and Quil environment with emacs and figwheel

My environment

  • emacs 26.3
  • cider 0.25.0
  • leiningen 2.9.4 on Java 11.0.2
  • ~/.lein/profiles.clj : {:user {:plugins []}}

Project setup

In a terminal, run these commands:

lein new quil-cljs minimal-quil
cd minimal-quil
lein figwheel
  • When figwheel is ready to connect, open a browser on http://localhost:3449
  • You should see a circle following a circular trajectory while changing its colour

simple emacs cider-connect (no cljs repl)

  • Assumes lein figwheel running properly (see project setup)

  • M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

  • M-x cider-connect

    • host: localhost
    • port for host: 3449
  • Minibuffer should display message: "[nREPL] Direct connection to localhost:3449 established"

  • Now change something in the core.cljs file (e.g. change q/ellipse to q/rect)

  • M-x save-buffer

  • You should see the ellipse change into a rectangle in the browser

more advanced cider-jack-in-cljs

  • Assumes no running lein figwheel (unlike cider-connect)
  • M-x find-file : .../minimal-quil/project.clj
  • add these dev dependencies:
...
  :profiles {:dev {:dependencies [[cider/piggieback "0.5.0"]
                                  [figwheel-sidecar "0.5.20"]]
                   :source-paths ["cljs_src"]
                   :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}}}
...
  • Make sure the :plugins dependency of lein-figwheel is aligned with the :dev dependency of figwheel-sidecar so in this case, it should be [lein-figwheel "0.5.20"]

  • M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

  • M-x cider-jack-in-cljs

    • select ClojureScript REPL type: figwheel
  • When lein figwheel is ready to connect, open a browser on http://localhost:3449

  • The *cider-repl minimal-quil(cljs)* buffer should display a cljs.user> prompt

  • Try (+ 2 3) ; it will compile the cljs to javascript, execute it in your browser and return the result in your repl

  • Try (js/alert "Hello World!") in the repl

  • M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

  • (+ 2 3) M-x cider-eval-defun-at-point

  • You now have the dynamic environment you're used to when developing clojure in emacs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment