Make ClojureScript development environment

Overview

There are some options for productive ClojureScript development environment.

This article pick up following three options.

Leiningen × Figwheel Main

deps.edn × Figwheel Main

Leiningen × lein-figwheel

I recommend 1st because deps.edn is new in April, 2019, so it has been kind for users using Cursive or Vim to use Leiningen yet.

Leiningen × Figwheel Main

Directory structure is like this.

code:bash

$ tree -L 2 .

├── README.md

├── dev.cljs.edn

├── figwheel-main.edn

├── project.clj

├── resources

│ └── public

│ ├── css

│ ├── index.html

│ ├── js

├── src

│ └── samples

├── src-dev

│ └── user.clj

project.clj is like this.

code:project.clj

(defproject samples "0.1.0-SNAPSHOT"

:description "FIXME: write this!"

:url "http://example.com/FIXME"

:license {:name "Eclipse Public License"

:url "http://www.eclipse.org/legal/epl-v10.html"}

:min-lein-version "2.7.1"

:dependencies [org.clojure/clojure "1.10.0"

org.clojure/clojurescript "1.10.520"]

:source-paths "src"

:aliases {"fig" "trampoline" "run" "-m" "figwheel.main"

"fig:build" "trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"

"fig:min" "run" "-m" "figwheel.main" "-O" "advanced" "-bo" "dev"

"fig:test" "run" "-m" "figwheel.main" "-co" "test.cljs.edn" "-m" samples.test-runner}

:profiles {:dev {:dependencies [com.bhauman/figwheel-main "0.1.9"

com.bhauman/rebel-readline-cljs "0.1.4"

nrepl/nrepl "0.6.0"

cider/piggieback "0.4.0"]

:repl-options {:init-ns user

:nrepl-middleware cider.piggieback/wrap-cljs-repl}

:source-paths "src-dev"}})

dev.cljs.edn defines ClojureScript compiler options.

code:dev.cljs.edn

^{:watch-dirs "test" "src"

:css-dirs "resources/public/css"

:auto-testing true}

{:main samples.core

:output-to "resources/public/js/main.js"

:output-dir "resources/public/js/out"}

figwheel-main.edn defines Figwheel options.

code:fighweel-main.edn

{:target-dir "resource"}

src-dev/user.clj defines REPL functions.

code:user.clj

(ns user

(:require figwheel.main.api :as fig))

(defn fig-start []

(fig/start {:mode :serve} "dev"))

(defn fig-stop []

(fig/stop "dev"))

(defn cljs-repl []

(fig/cljs-repl "dev"))

code:resources/public/index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Then do:

Launch REPL

Emacs cider user should use cider-jack-in

Cusive user should do following

Run -> Edit Configurations

Add Local REPL

Which type of REPL to run: nREPL

How to run it: Run with Leiningen

And Run

Evaluate following in REPL

(fig-start)

(cljs-repl)

If you want to stop ClojureScript REPL, evaluate these

:cljs/quit

(fig-stop)

deps.edn × Figwheel Main

Directory structure is like this.

code:bash

$ cd sample

$ tree -L 2 .

├── Makefile

├── deps.edn

├── resources

│ └── public

├── src

│ └── user.clj

├── src-cljs

│ └── sample

│ └── core.cljs

└── target

deps.edn is like this.

code:deps.edn

{:deps {org.clojure/clojure {:mvn/version "1.10.0"}

org.clojure/clojurescript {:mvn/version "1.10.520"}

com.bhauman/figwheel-main {:mvn/version "0.2.0"}

:paths "src" "src-cljs" "resources" "target"

:aliases {:nrepl {:extra-deps {nrepl/nrepl {:mvn/version "0.6.0"}

cider/piggieback {:mvn/version "0.4.0"}}}}}

Use Makefile to launch REPL.

code:Makefile

repl:

clj -R:nrepl -m nrepl.cmdline --middleware "cider.piggieback/wrap-cljs-repl"

Write following REPL commands.

code:src/user.clj

(ns user

(:require figwheel.main.api :as fig))

(defn fig-start []

(fig/start {:id "dev"

:options {:main 'samples.core}

:config {:watch-dirs "src-cljs"

:mode :serve

:open-url false

:target-dir "target"

:cljs-devtools true}}))

(defn fig-stop []

(fig/stop "dev"))

(defn cljs-repl []

(fig/cljs-repl "dev"))

Then do:

Launch REPL

make repl

Connect to REPL

Emacs cider user should use cider-connect.

Cursive user should use Remote REPL

Check Use Leiningen REPL Port and Run