Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.

Up and running with ClojureScript in 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

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-projectcd my-projectmkdir -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"]}           :min   {:main-opts ["-m" "figwheel.main" "-O" "advanced" "-bo" "prod"]}           }}

You’ll notice that this defines two build profiles — build and min.

“Build” is your dev environment, and “min” will give you an optimised, minified productionised version.

We need to provide some extra runtime context, though, to get the benefits of hot-reloading.

Also in the project root, create deps.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]))
(enable-console-print!)
(defn my-component []  [:p "My first React component"])
(defn ^:export main []  (reagent/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 was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Publication date
Author
Rory Gibson
Article source

Disclaimer

The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.

Tags