Developing electron apps in clojurescript with emacs – setting up guide

I recently decided to write a front-end to a REST API for work that I’ve written in clojure.

After looking around, I thought it would be fun to use electron, as the target output matches our users very well; a mixture of Linux, Mac and Windows.

To get started, I looked around for a few lein templates, and came across descjop and electron-template.

Unfortunately the default template in descjop didn’t work for me, I couldn’t get a figwheel prompt back when I started the electron application. In the meantime, I tried electron-template and it did work straight away.

However, I could only start it from command line, and it didn’t integrate immediately with emacs and cider.

I tried following the lein-figwheel guide to setup nREPL with figwheel manually, but that didn’t work either, the electron application was missing all the cljs libraries (the chrome debugger is a wonderful thing).

Fortunately, after a short request on the electron-template issues list, the maintainer update the project to document how to get it working with nREPL.

The following are the additional configurations I made to get cider-jack-in to work with electron-template.

user.clj

Create the following in env/dev/cljs/user.clj (this is on the classpath, but really should be a clj directory somewhere in your project)

(ns user
  (:use [figwheel-sidecar.repl-api :as ra]))

(def figwheel-config
  {:figwheel-options {:css-dirs ["app/css"]}
   :build-ids ["dev"]
   :all-builds
   [{:id "dev"
     :figwheel {:on-jsload "etest.core/mount-root"}
     :source-paths ["src/cljs" "env/dev/cljs"]
     :compiler {:main "etest.dev"
                :asset-path "js/p/out"
                :output-to "app/js/p/app.js"
                :output-dir "app/js/p/out" }}]})

(defn start [] (ra/start-figwheel! figwheel-config))
(defn stop [] (ra/stop-figwheel!))
(defn cljs [] (ra/cljs-repl "dev"))

The on-jsload element needs to reflect the real project name.

project.clj

The following additions were needed to align with the lein-figwheel documentation.

:profiles {:dev ;; ...
                   ;; ...
                   :dependencies [[figwheel-sidecar "0.5.0-2"]
                                  [com.cemerick/piggieback "0.2.1"]]
                   ;; ...
:repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}

Testing it out!

Fire up emacs, and run cider-jack-in (C-c M-j), then in the REPL run following:

user> (start)
Figwheel: Starting server at http://localhost:3449
Figwheel: Watching build - dev
Compiling "app/js/p/app.js" from ["src/cljs" "env/dev/cljs"]...
Successfully compiled "app/js/p/app.js" in 1.78 seconds.
Figwheel: Starting CSS Watcher for paths  ["app/css"]
#<SystemMap>

user> (cljs)
Launching ClojureScript REPL for build: dev
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
nil

Start your application on the command line (working on integrating this into emacs too as a minor-mode):

$ grunt launch

At this point, your figwheel REPL will come back into life and you can start using it inside emacs, with cljs file changes being reflected in the application. Without piggieback, you’ll get a “Stdin:” prompt in your REPL instead of being able to edit the page directly.

Now I’ve got no excuse not to learn om-next and get the real meat of the application working.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s