Skip to content

Running figwheel with LightTable

Gabriel Horner edited this page Jan 24, 2016 · 2 revisions

Introduction

Figwheel and LightTable are awesome complementary tools. Figwheel provides hotloading features and compiles ClojureScript files to JavaScript on file save. LightTable is agnostic to compiling ClojureScript files and focuses on providing an in-editor ClojureScript repl that just works.

Reproducibility

This has been tested with the following versions and should work with other versions:

  • figwheel/lein-template "0.5.0-4" used to generate project
  • lein-figwheel "0.5.0-4"
  • LightTable 0.8.1
  • Clojure 1.7.0
  • ClojureScript 1.7.170

Three easy steps

  1. lein new figwheel hello-world -- --reagent

    This generates a standard figwheel project configured to use reagent. Any other standard figwheel project should work fine

  2. cd hello-world && lein figwheel

    Start a figwheel server. No nrepl setup required!

  3. Open up src/hello_world/core.cljs, open the command bar (Ctrl-space) and run the command Eval a form over any form e.g. the ns form at the top. Once LightTable says you're connected, you have a live repl!

    The command opens up an internal browser in another tab and connects a cljs repl to that tab. The internal browser is opened to your app resources/public/index.html and your app is just a browser tab away.

Usage tips

  • Since LightTable has an in browser tab, you can use your repl while looking at your app. By default the tab is not split screen but you can do this by right clicking on the browser tab and select Move tab to new tabset. Here's a screenshot of this layout also showing a figwheel warning in action:

  • Figwheel is great for auto-updating your file changes. When you don't want all your file changes to take effect, just eval a specific form with Cmd-enter/Ctrl-enter which runs the above Eval a form command. Since it's a repl, your app will update just that change.
  • If you have snippets of code that you're prototyping and don't want to take effect on save, it's recommended to wrap them all in a comment block e.g. (comment ...) at the bottom of the file. With this workflow you can try individual snippets of code and when you're satisfied use them and press save.

Using with lein repl

As explained in Using the Figwheel REPL within nREPL, you can start figwheel from within a lein repl which gives you more control over using figwheel. Here's a list of steps from that page:

  1. Add the following to your project.clj

      :profiles {:dev {:dependencies [[figwheel-sidecar "0.5.0-1"]]
                 :source-paths ["cljs_src"] }}
  2. lein repl to start the repl

  3. (use 'figwheel-sidecar.repl-api)

  4. (start-figwheel!)

Now that figwheel is started you can do step 3 from the above section to get a LightTable repl. To see what commands you can control figwheel with, run (api-help).

React Native repl

If you're using figwheel for a React Native repl such as re-natal, LightTable's repl doesn't currently work with figwheel's (cljs-repl). The core team is looking into solutions for this and will update when we have a solution