Electron + Figwheel Support

owensd

Today we’ll look at adding in https://github.com/bhauman/lein-figwheel support. Really, it’s fairly easy to do once you know all of the gotchas…

The biggest “gotcha”: resources/public. It turns out that figwheel loads everything from a hard-coded path. Remember though, I want to put all of my output under a .out/ path.

The fix is straight-forward: symlinks! That’s right, we are going to put in a super awesome (read totally crappy) hack:

resources/public -> ../.out/dev/app

Project.clj Updates

There are actually only a few updates that we need to do:

  1. We need to add the plugins section with: [lein-figwheel “0.5.9”].
  2. Then we’ll update the electron-dev section up with this: ["shell" "grunt" "symlink" "--source=.out/dev/app" "--target=resources/public”].
  3. Add the resources folder to our clean-targets to clean up the hack: :clean-targets ^{:protect false} [".out" ".tmp" ".dist" "resources”].
  4. The ui-dev section needs to have some updates:
:figwheel {:on-jsload "blog-post.landing/on-reload"
           :open-urls ["http://localhost:3449/index.html"]}

This is going to allow us to implement a function, on-reload, that will get called every time our code changes. We’ll put that in landing.cljs:

(defn ^:export on-reload []
  (println "reloaded!"))

Second, the open-urls section will automatically open a browser to the given URL. This is less handy for an Electron app, but since I want my code to run under both contexts, it can be useful.

  1. The last thing needed is a top-level figwheel configuration setting:
:figwheel {:server-logfile ".out/dev/logs/figwheel-logfile.log"
           :css-dirs ["ui/public/css"]
           :auto-clean false}

The most important part here is the auto-clean section. Without this, all of your build output will get clobbered. Be sure to have it!

That’s actually it. Run: lein figwheel ui-dev  (of course, you’ll need to build first: lein electron-dev) and you should get a browser window opened automatically for you. And running electron resources/public will open up Electron with figwheel ready to go.

Here’s the link to the repo: https://github.com/owensd/electron-blog-post-sample/tree/figwheel.

Electron + Figwheel Support