How do I setup a Clojurescript REPL with emacs?

Question

I'm trying to setup an environment for Clojurescript. The problem I'm having is not knowing how to set it up so that I can connect to a Clojurescript Browser REPL from emacs, so I can evaluate forms right from the editor and have it show up in the browser.

Things I've tried:

I tried using Cemerick's piggieback and piggybacking on nREPL. I don't really know how to configure it from the documentation. I was able to get it to work after figuring out I had to make an index.html file in the root of the project folder. Except the server doesn't serve my assets.

I tried setting up inferior-lisp with the bash script from the Clojurescript wiki. However, whenever I try to run the inferior-lisp-program I'm getting "Wrong type argument: stringp, nil".

Here's my ideal workflow:

I have a project folder/resources/public folder that has my assets and html files. I can start a web server that serves those files somehow, either by ring or using python's simple http server. I'd be able to connect to a REPL from emacs and evaluate forms into it.

Thundering

I recommend github.com/magomimmo/modern-cljs. It shows you how to implement your ideal workflow including even the Python one-liner for serving your public assets. Easily one of the best cljs resources available. – Flinty

Dear 2018 readers: Please check out Figwheel (figwheel.org), or have a look at my answer at the bottom. Having a browser-connected REPL has gotten simpler! – Khat

Answer 1

Cemerick to the rescue again: Austin (https://github.com/cemerick/austin) is exactly what you're after.

Austin gives you two options: either a REPL where the JS is evaluated in a browser (a "project REPL"), or a more complete, integrated browser-connected REPL. It sounds like the latter is what you're after, and you need to dig a little harder for its docs: https://github.com/cemerick/austin/tree/master/browser-connected-repl-sample

To get the browser-connected REPL working, Chas's example is fairly straightforward to follow, and boils down to:

1. Add a little middleware or template magic to append a JS script element to your HTML page, and that script needs to contain the output of (cemerick.austin.repls/browser-connected-repl-js)
2. Start up nREPL, start up your ring server, and then
   (def repl-env (reset! cemerick.austin.repls/browser-repl-env (cemerick.austin/repl-env)))
   to create a REPL environment.
3. Turn the nREPL session from a Clojure to a ClojureScript REPL with
   (cemerick.austin.repls/cljs-repl repl-env)
4. Connect to your still-running Ring server app with a browser, and you should be connected.
   (.alert js/window "Hi!") should prove it.
5. Using the standard Emacs nREPL commands will work as expected, compiling ClojureScript into JavaScript and sending it to the browser for evaluation.

The main difference between Piggieback and Austin is those first and second steps: the atom is used by the middleware to add an inline JavaScript block that connects back to the nREPL. Since the HTTP URL is determined at runtime, the Ring server and client-side JavaScript need to work in concert.

FWIW I created a function in my user namespace to speed connecting the CLJS REPL:

(defn cljs-browser-repl
  "Fire up a browser-connected ClojureScript REPL"
  []
  (let [repl-env (reset! cemerick.austin.repls/browser-repl-env
                         (cemerick.austin/repl-env))]
    (cemerick.austin.repls/cljs-repl repl-env)))

Olathe

Answer 2

I had similar problems after following the tutorial on https://github.com/clojure/clojurescript/wiki/Quick-Start

What helped me was the last suggestion on https://groups.google.com/forum/#!topic/clojure/_JWvqc3fENQ

Replacing the meta tag in index.html with

<meta content="text/html;charset=UTF-8" http-equiv="content-type">

Gardening

Answer 3

With Figwheel main, setting up a live-reloading, browser-connected REPL has become much simpler. Figwheel.main compiles your Clojurescript source as you change it, and allows to to evaluate code in the browser.

1. Define your dependencies in deps.edn. :paths specifies folders to look for source code.

   {:deps {org.clojure/clojure {:mvn/version "1.9.0"}
           org.clojure/clojurescript {:mvn/version "1.10.339"}
           com.bhauman/figwheel-main {:mvn/version "0.1.9"}}
    :paths ["src"]}
   

2. Define your application entry point in dev.cljs.edn. Here, "dev" becomes the build name.

   {:main example.core}
   

3. Create some ClojureScript code in src/example/core.cljs.

   (ns example.core)
   
   (let [msg "Change msg in src/example/core.cljs and see what happens!"]
     (js/alert msg))
   

4. Start the REPL.

   • To use Emacs:
     1. Run M-x cider-jack-in-clojurescript
     2. Select figwheel-main as your build target
     3. Set :dev as your build name.
   • With a terminal:
     1. Run clojure -m figwheel.main -b dev -r. -b dev sets the build, and -r launches a REPL on load.

For further information, refer to Figwheel's well-made documentation.

Khat