The ClojureScript (CLJS) story has been moving so quickly for a few years now that occasionally it’s worth putting together a quick post on how to get started with a productive dev environment as simply as possible. Here’s my version for late 2018 (November). tl;dr the best way to get rolling is now (the newest version, ) Figwheel Figwheel Main The CLJ command line build tools to give you React bindings Reagent First you need a new and up-to-date Clojure. $ brew install clojure (or if you already have a 1.9+ version and want to get the latest) brew upgrade clojure Create the basic project structure: mkdir -p my-project/src/my-projectcd my-projectmkdir -p resources/public Create a in the project root — this is effectively your build file and for a simple project replaces Leiningen or Boot. deps.edn {:deps {org.clojure/clojure {:mvn/version "1.9.0"}org.clojure/clojurescript {:mvn/version "1.10.339"}reagent {:mvn/version "0.8.1"}}:paths ["src" "resources"]:aliases {:fig {:extra-deps{com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}com.bhauman/figwheel-main {:mvn/version "0.1.9"}}:extra-paths ["target" "test" "resources"]}:build {:main-opts ["-m" "figwheel.main" "-b" "dev" "-r"]}}} This defines your build profile, keyed under “build” (you can add more, like a productionised, minified one — see future blog posts!) We need to provide some extra runtime context, though, to get the benefits of hot-reloading. Also in the project root, create containing: dev.cljs.edn ^{:watch-dirs ["src"]:css-dirs ["resources/public"]:auto-testing true}{:main my-project.core:output-to "target/public/main.js"} Let’s create a way of getting it into a browser by creating an index page that references our compiled JS. Put this in : resources/public/index.html <!DOCTYPE html><html> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <div id="app"></div> <script src="/main.js"></script> </body></html> And a CSS file at resources/public/styles.css: body {font-family: Arial;text-align: center;} Last, we need some actual ClojureScript! Create src/my-project/core.cljs (ns ^:figwheel-hooks my-project.core(:require [reagent.core :as r])) (defn my-component [][:p "My first React component"]) (defn ^:export main [](r/render[my-component](.getElementById js/document "app"))) (main) Now you can start it all up with only $ clojure -A:fig:build That should pop a browser window open straight away, showing your shiny new React application, and drop your Terminal into a REPL with the new Rebel Readline command line editing capabilities. Editing the ClojureScript (or the CSS) should result in an immediate hot-reload that you see in your browser. body {font-family: Arial;text-align: center;font-size: 22pt;color: red;} Addendum I discovered all this while creating — a simple payments system & shopping cart designed for hackers, makers, bootstrappers and startups. Trolley It’s all written in Clojure(Script), though it works with any technology. There are more blog posts coming, as I’ve learned loads about modern CLJ/CLJS web development recently!
