Blogs
GitHub
Slack
Forum
shadow-cljs
ClojureScript compilation made easy!
shadow-cljs provides everything you need to compile your ClojureScript code with a focus on simplicity and ease of use.
  • Good configuration defaults so you don't have to sweat the details
  • Supporting various targets :browser, :node-script, :npm-module, :react-native(exprimental)...
  • Live Reload (CLJS + CSS)
  • CLJS REPL
  • Importing CommonJS & ES6 modules from npm or local JavaScript files
  • Code splitting (via :modules)
  • Fast builds, reliable caching, ...
  • To get shadow-cljs, run:
    npm install -g shadow-cljs
    Mind that shadow-cljs needs JVM in order to compile ClojureScript.

    Configuration

    Configuring a browser app with shadow-cljs.edn:
    {:source-paths ["src"]
     :dependencies [[reagent "0.8.0-alpha2"]]
     :builds {:app {:target :browser
                    :output-dir "public/js"
                    :asset-path "/js"
                    :modules {:main {:entries [my.app]}}}}}
    Supposing the namespace for you main file is my.app:
    shadow-cljs.edn
    src/
      my/
        app.cljs
    public/
      js/
    :target :browser specifies it will build code for browsers. You may use :target :node-script for Node.js code. Find more about targets.

    CLI tools

    Commonly used shadow-cljs commands during development:
    # compile a build once and exit
    shadow-cljs compile app
    
    # compile and watch
    shadow-cljs watch app
    
    # connect to REPL for the build (available while watch is running)
    shadow-cljs cljs-repl app
    
    # connect to standalone node repl
    shadow-cljs node-repl
    Running a release build optimized for production use.
    shadow-cljs release app

    Import npm modules

    With shadow-cljs, most npm modules for browser can be imported with modules installed locally.
    (ns app.main
      (:require ["md5" :as md5]
                ["fs" :as fs]))
    
    (println (md5 "text"))
    
    (fs/readFileSync "deps.den" "utf8")

    Hot code swapping

    shadow-cljs watch file changes and re-compiles in watching mode. Code are compiled incrementally, warnings and errors are displayed after prettified.
    {:source-paths ["src"]
     :dependencies [[mvc-works/hsl "0.1.2"]]
     :builds {:browser {:target :browser
                        :output-dir "target/browser"
                        :modules {:main {:entries [app.main]}}
    
                        :devtools {:after-load app.main/reload!
                                   :http-root "target"
                                   :http-port 8080}}}}

    Long term caching

    By setting in :module-hash-names field, you may tell shadow-cljs to add MD5 hash in the filenames generated. It's a trivial feature in Webpack, now it's one-liner config in ClojureScript. Meanwhile assets.edn file can be emitted for indexing js files in HTML.
    {:source-paths ["src"]
     :dependencies [[mvc-works/hsl "0.1.2"]]
     :builds {:browser {:target :browser
                        :output-dir "target/browser"
                        :modules {:main {:entries [app.main]}}
    
                        :release {:output-dir "dist/"
                                  :module-hash-names 8
                                  :build-options {:manifest-name "assets.edn"}}}}}
    Afer compilation, two files will be generated in dist/ with names:
    =>> l dist/
    assets.edn        main.9683CD2F.js

    Other features

    There are more features you may explore in shadow-cljs:
    Read User Guide for more features.
    This page is powered by shadow-cljs and Respo. shadow-cljs/shadow-cljs.org