
mafinar
ClojureScript + LiveView
I did not add this to a “this weekend I’ll learn” like my few other journals as I am decided on using this in the long term.
Last I worked with Clojure was first around 2011 (for a few months, to implement a TCP server but other programmers revolted and had to move to Netty + Java) and then ClojureScript in 2014, (with ClojureScript + Reagent, I actually learned Reagent before React), that stretched almost a year, but again, the other developers revolted and wanted to use Angular instead (I know right?), so that was just one project.
Last weekend while trying to embed Alpine 3 to my project, combined with dependa bot alerts, I wondered if I could go without “Webpack” and used “Parcel” instead, in the spirit of science, I did that and it went smooth. Alpine 3 worked too, seems like I needed Webpack 5 or something (but I am past caring about that now). Then it occured to me, hey, remember ClojureScript? Why not try that out, since I had enough JS fatigue for the hour?
I went on to Clojure land and discovered this thing called Shadow CLJS, along with some cool things like Spec, Transducers etc, folks were busy! So, I surfed the web for articles, found one, and with it, I converted my app.js
to src/main.cljs
, wrapped all my hooks with (deftype)
-s, and an hour or two later, it worked!
I did keep the Parcel though, because I did not know how to copy SCSS in ClojureScript (yet).
Last weekend was a blast, sure, I worked hard. But when things failed, they had logical reasoning for it. And while Elixir and the Lisp are different on the surface, the data centric idea remained similar. So it was context switching without context switching for me. I had three hooks, some charts and a heat map, those were promptly converted. Wasn’t as easy as they were when I first made them, but was much more fun, and readable. Good times.
Therefore I decided to stick to it. This project will get more hooks, so more cljs
coming along the way. My other project KarmaWerks
(A LiveView + DGraph + JS ClojureScript) is getting a revival next month. And my short bike tracking weekend work (MilesToGo
- realtime personal location tracking app something I want to track my next month’s vacation/hiking with) is going to keep me occupied during the weekends. All Open Source things! So lots of fun coming our way!
So here’s what I’ll do. I’ll update my work progress in this place. I will work with KarmaWerks
AFTER I am done with a smallest workable unit of MilesToGo
, the Covid19
dashboard is like somewhat workable already and is used as the experimentation field for the whole thing. I’ll speak on progress of whatever it is I am working with at the time. To remind myself of how things were should I get back to them after 2 years!
And before I leave, my gratitude to the authors of the two articles that helped me set up Parcel and ClojureScript with Phoenix:
- https://www.dwolla.com/updates/webpack-to-parcel/ (Setting up Parcel + Phoenix)
- https://darioghilardi.com/how-to-setup-a-phoenix-and-clojurescript-project/ (Setting up ClojureScript + Phoenix)
Thank you for getting me set-up without having to scratch my head.
Most Liked

mafinar
OFFTOPIC. I also realized, it’s been a year since I joined DevTalk! It’s been a good year in a great forum with awesome people! Learned a lot of things! Thank you folks!

mafinar
Add ClojureScript to MilesToGo
MilesToGo is a personal location tracking app I am making to track cars, bikes etc that you own and then checkout all the places you visited. Currently it only has authentication. But I intend to have a nice little implementation in a month. I will mostly be talking about that in here!
In this post I am going to describe the steps I took to include ClojureScript to MilesToGo
. The steps are:
- Remove Webpack, node_module, and all JS code
- Add Parcel (mostly for SCSS packaging)
- Add ClojureScript along with its
app.js
equivalent with all live-view initialization
So let’s start
Removing JS Code
- First, I removed everything under the
assets/js/
folder, along withpackage-lock.json
andwebpack.config.js
- In
package.json
I removed everything indevDependencies
At this point the system is broken in the front-end section. iex -S mix phx.server
will spawn the Elixir process fine, but will complain that it couldn’t start the Node
watcher. You will still be able to start and see the app as it is, because priv/static/*
, so I went ahead and deleted those too. Now it’s all a mess! Let’s clean it.
Add Parcel
This bit is optional, I could just keep webpack
and let it do the work, but Parcel
is simpler and since all I need it for is to pack the styles, why not keep it minimal and less complected?
-
cd
intoassets/
-
npm install --save-dev parcel
(And hello vulnerability warning!) - Made package.json’s
script
-s look like this:
{
...
"scripts": {
...
"deploy": "cp -R static/* ../priv/static/ && parcel build js/assets.js --dist-dir ../priv/static/css --public-url /dist --no-cache",
"watch": "cp -R static/* ../priv/static/ && parcel watch js/assets.js --dist-dir ../priv/static/css --public-url /dist"
},
...
}
- What should’ve been
app.js
is nowasseta.js
. Because that is what it acts like. And asset manager. So I went ahead and created anassets.js
with just one line of code:import css from "../css/app.scss";
By now I had Parcel
set up. But Phoenix needs to know when/how to reload these things.
- Now, add
npm install --save-dev parcel-plugin-stdin
because well, to kill node processes and mimic--watch-stdin
functionality upon server stops. (Or something along the line, I didn’t care to read more about it at this time) - Added
npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
indev.exs
in the firstMilesToGo.Endpoint
config. Replacing thewebpack
friendly one. - In
root.html.leex
, I renamed<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
to<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/assets.css") %>"/>
- If I run Phoenix now, I will see all the colors coming back. None of the live-views though. We need to get ClojureScript for that.
Add ClojureScript
-
CD
intoassets/
- I never thought I’d be loving an
npm
command this much. I went ahead and typednpm install --save-dev shadow-cljs
to kick things off. Also, no vulnerabilities. - Next, I initialized shadow-cljs with
node_modules/.bin/shadow-cljs init
. A wildshadow-cljs.edn
appeared. - This totally needs to be a watcher in
dev.exs
. So, added the following watcher todev.exs
right below the Parcel one (This will change a few steps later though):
node: [
"node_modules/.bin/shadow-cljs",
"watch",
"app",
cd: Path.expand("../assets", __DIR__)
]
- I realized if I watch all the
js
patterns insidepriv/static/
I will be overwhelmed at all the files that will be generated, however, I do need to watch just for one file, the resultantapp.js
, so I went ahead and removed thejs
from the patterns and addedapp.js
like so:
...
live_reload: [
patterns: [
~r"priv/static/js/app.js$", # Add the app.js
~r"priv/static/.*(css|png|jpeg|jpg|gif|svg)$", # Remove the js pattern
...
]
]
- Now in Clojure land, we need to mention where and how to generate files. And that’s need to be in our
shadow-cljs.edn
file. So, I went ahead and added things inbuilds
. The file now looks like:
;; shadow-cljs configuration
{:source-paths
["src"]
:dependencies
[]
:dev-http {9080 "../priv/static/js/"}
:builds {:app {:output-dir "../priv/static/js/"
:asset-path "/js",
:target :browser
:modules {:app {:init-fn app.main/main!}}
:devtools {:after-load app.main/reload!}}}}
- Now let’s test things, and for that, let’s add a ClojureScript file inside
assets/src/app/main.cljs
. Just to see folks are all friendly with each other:
;; assets/src/app/main.cljs contents. For now. This will house live-view things in a bit.
(ns app.main)
(defn main! []
(println "App loaded!"))
- Now the problem with me was, I kept getting error claiming “Already Started”, because killing Phoenix didn’t seem to have killed the
java
process. So as per the tutorial, I added this file and changed mywatcher
to reflect it. (The file is/assets/cljs-start.sh
)
#!/usr/bin/env bash
# Start the program in the background
exec "$@" &
pid1=$!
# Silence warnings from here on
exec >/dev/null 2>&1
# Read from stdin in the background and
# kill running program when stdin closes
exec 0<&0 $(
while read; do :; done
kill -KILL $pid1
) &
pid2=$!
# Clean up
wait $pid1
ret=$?
kill -KILL $pid2
exit $ret
And my watcher
looked like (Remember that file I said I’ll change?):
watchers: [
...
bash: [
"cljs-start.sh",
"node_modules/.bin/shadow-cljs",
"watch",
"app",
cd: Path.expand("../assets", __DIR__)
]
]
- Now if I run
iex -S mix phx.server
, open the site and console, I will see a nice"App Loaded"
message.
Yay! I successfully managed to add ClojureScript in a Phoenix project, thanks to shadow-cljs
Enter LiveView
-
main.cljs
is our person to write whatever ClojureScript we want in. Remember theapp.js
with all theliveview.connect()
etc? We need those in ClojureScript. Without further ado, I’ll just add what’s in the file:
(ns app.main
(:require
["nprogress" :as nprogress]
["phoenix_html" :as phoenix_html]
["phoenix" :refer [Socket]]
["phoenix_live_view" :refer [LiveSocket]]))
(def csrf-token (-> "meta[name='csrf-token']"
(js/document.querySelector)
(.getAttribute "content")))
(def live-socket-params
(clj->js {:params {:_csrf_token csrf-token}}))
(set!
(.. js/window -liveSocket)
(LiveSocket. "/live" Socket live-socket-params))
(def live-socket (.. js/window -liveSocket))
(defn main! []
(.connect live-socket))
Now we have a working example of LiveView + ClojureScript.
There are some thing missing out though:
- NProgress?
- There were some JS kung-fu to manage closing of alerts and browser burgers etc.
I will be back with those soon!
In the meantime, the code is in Github! Here’s the PR. It is incomplete but if you want a more full ClojureScript + LiveView implementation, there’s this.

mafinar
Went ahead and removed Parcel
too. Installed the Dart Sass and am using that instead. I now have the smallest package.json I ever produced:
{
"repository": {},
"description": " ",
"license": "MIT",
"dependencies": {
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view"
},
"devDependencies": {
"bulma": "^0.9.1",
"shadow-cljs": "^2.14.5"
}
}
And the dev.exs
reference of npm
changed to sass
, like:
...
watcher:
...
sass: [
"--watch",
"assets/css/app.scss",
"priv/static/css/assets.css",
],
Not sure I did it right but it works.
Popular Backend topics










Other popular topics










Latest in Backend
Latest (all)
Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /js
- /rails
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /haskell
- /emacs
- /svelte
- /onivim
- /typescript
- /crystal
- /c-plus-plus
- /tailwind
- /kotlin
- /gleam
- /react
- /flutter
- /elm
- /ocaml
- /vscode
- /opensuse
- /ash
- /centos
- /php
- /deepseek
- /zig
- /scala
- /html
- /debian
- /nixos
- /lisp
- /agda
- /textmate
- /sublime-text
- /react-native
- /kubuntu
- /arch-linux
- /revery
- /ubuntu
- /manjaro
- /spring
- /django
- /diversity
- /lua
- /nodejs
- /c
- /slackware
- /julia
- /neovim