wal.sh
home > research > reagent-tooling · Jun 01, 2017

Reagent Development Tooling

reagentclojurescriptfigwheelreacthot-reloadingleiningen

Reagent Development Tooling

Table of Contents

1. Overview

correct · pilot-annotation-pass · 2026-10-08

Shadow-cljs has emerged as the modern standard, replacing Figwheel as the primary development server, while providing superior npm integration and simplified configuration.

2. Background

correct · pilot-annotation-pass · 2026-10-08

The Reagent ecosystem originally relied on Figwheel (later Figwheel Main) for hot-reloading, paired with Leiningen or Boot for project management. Around 2018-2019, shadow-cljs gained popularity due to its native npm package support, simpler configuration, and faster compilation.

3. Key Concepts

3.1. Shadow-cljs

A ClojureScript build tool that compiles to JavaScript with first-class npm support: 

;; shadow-cljs.edn
{:source-paths ["src"]
 :dependencies [[reagent "1.2.0"]]
 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"
        :modules {:main {:init-fn app.core/init}}}}}

3.2. Hot Module Replacement

Shadow-cljs automatically reloads changed namespaces without losing application state: 

(defn ^:dev/after-load reload []
  (reagent.dom/render [app] (.getElementById js/document "app")))

3.3. REPL Integration

Connect to running applications for interactive development: 

npx shadow-cljs cljs-repl app

3.4. Preloads

Development-only namespaces loaded before application code: 

:devtools {:preloads [devtools.preload day8.re-frame-10x.preload]}

4. Implementation

4.1. Project Initialization

npx create-cljs-project my-reagent-app
npm install react react-dom

4.2. Development Workflow

# Start development server with hot-reloading
npx shadow-cljs watch app

# Run tests
npx shadow-cljs compile test && node out/test.js

# Production build with optimizations
npx shadow-cljs release app

4.3. Editor Integration

  • Emacs: CIDER with cider-jack-in-cljs selecting shadow-cljs
  • VS Code: Calva extension with shadow-cljs support
  • IntelliJ: Cursive with external REPL connection

4.4. Debugging Tools

;; deps.edn or shadow-cljs.edn
{:dependencies [[binaryage/devtools "1.0.7"]
                [day8.re-frame/re-frame-10x "1.5.0"]]}

5. References

6. Notes

verified · pilot-annotation-pass · 2026-10-08
  • Shadow-cljs eliminates the need for cljsjs packages by supporting npm directly
  • Use :dev/before-load and :dev/after-load metadata for reload lifecycle hooks
  • The release build applies Google Closure advanced optimizations for production
  • Consider shadow-cljs.edn for simpler projects, deps.edn integration for monorepos

7. Related