Introduction

So I have been meaning to learn about clojurescript for a while now, and have been putting it off. This is my attempt to try and get something going, and understanding how to use clojure/clojurescript

Why Hoplon?

While there are other frameworks out there, I really liked how simple hoplon seemed to be. When looking at the TODO mvc I could grasp it quite easily of what was going on. I don’t plan to do anything too complicated, and just wanted something simple to begin with.

With the react libraries/frameworks (reagent/reframe/rum) I wasn’t interested in learning react and understanding how it worked too much. But maybe it is something for the future.

Shadow cljs

With Hoplon it seems like it was recommended to use boot as the tool setup a new project, however it seemed like the tool wasn’t being developed much anymore. I also remember reading somewhere that the tool wasn’t being used extensivley within the community.

I had heard of shadow-cljs and it seemd like a pretty popular tool. So I decided to give it ago. There was also an excellent videos [video 1, video 2] about how to use the tool.

Install shadow-cljs

To get started with shadow-cljs first you need to make sure that you have Java and NPM installed

npm install -g shadow-cljs

Zamansky template

To get started I used the template that Mike Zamansky created and made some changes to it.

Below is the shadow-cljs.edn which is where you configure how shadow-cljs. It also where you can specify your clojure dependencies. A lot of the configuration options are documented in the excellenct shadow-cljs documentation.

;; shadow-cljs configuration
{
 ;; where the source files are located
 :source-paths ["src"]

 ;; setup the nrepl server to use for development
 :nrepl {:port 9000}

 ;; clojure dependencies. npm dependencies can be manage via package.json
 :dependencies [[nrepl "0.8.3"]
                [binaryage/devtools "1.0.2"]
                [cider/piggieback "0.4.0"]
                [cider/cider-nrepl "0.25.5"]
                [org.clojure/clojure "1.10.0"]
                [org.clojure/clojurescript "1.10.339"]
                [hoplon/hoplon             "7.2.0"]]

 :dev-http {9090 "target/"}

 ;; can have multiple builds here
 :builds {:app {:output-dir "target/"
                :asset-path "."
                :target     :browser
                ;; hoplon here is what the file name will be
                ;; main.page.index/main relates to your src folder structure
                :modules    {:hoplon {:init-fn main.pages.index/main}}
                ;; allows us to use the binaryage/devtools package to have better console message in chrome dev-tools
                :devtools   {:after-load main.pages.index/init!
                             :http-root  "target"
                             :http-port  9090}}}
 }

The package.json file is where we can configure how npm works and also the place where you can install your javascript dependencies.

{
   "name": "trantor",
   "version": "0.0.1",
   "description": "A simple template for my shadow-cljs using hoplon webframework",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "tw": "tailwind build tw/style.css -- -o target/css/main.css",
      "watch": "shadow-cljs watch app",
      "watch:css": "onchange 'tw/*css' -- npm run tw"
   },
   "repository": {
      "type": "git",
      "url": "git+https://github.com/dilzeem/trantor.git"
   },
   "keywords": [],
   "author": "",
   "license": "",
   "bugs": {
      "url": ""
   },
   "devDependencies": {
      "onchange": "^6.1.0",
      "tailwindcss": "^1.1.4",
      "shadow-cljs": "2.11.4"
   },
   "dependencies": {
      "jquery": "^3.3.1"
   }
}

There in an excellent video explaining edn and how to use configure it for your clojure project. It seems like this is the preferred tool to use to manage clojure projects.

Build the site

Install dependencies:

npm install 

Run Shadow CLJS dev server (and REPL):

npm run watch 

You don’t have to do the above because, it will automatcailly created when jacking in into the REPL.

In another terminal, recompile Tailwind CSS if it changes:

npm run watch:css