Up and running with ClojureScript in 2018

Published in

HackerNoon.com

3 min readOct 31, 2018

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

Figwheel (the newest version, Figwheel Main)
The CLJ command line build tools
Reagent to give you React bindings

First you need a new and up-to-date Clojure.

$ brew install clojure

(or brew upgrade clojure if you already have a 1.9+ version and want to get the latest)

Create the basic project structure:

mkdir -p my-project/src/my-project
cd my-project
mkdir -p resources/public

Create a deps.edn in the project root — this is effectively your build file and for a simple project replaces Leiningen or Boot.

{: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 dev.cljs.edn containing:

^{: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 Trolley — a simple payments system & shopping cart designed for hackers, makers, bootstrappers and startups.

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!

Up and running with ClojureScript in 2018

Written by Rory Gibson