For the last few hack days, I've been developing a small clojurescript application using a stack that is fairly new to me: quiescent and figwheel. At the last hack day I finished the application and deployed it as a pure-ClojureScript application with no server-side Clojure code. I'll demo my application, and talk about some of the things I learned in the process. We'll also live code a ClojureScript web application from scratch and deploy it using Amazon S3 static hosting in a matter of minutes.

1. An Adventure in
Serverless ClojureScript
Norman Richards

2. Original goal:
Get out of my comfort zone and do something new with Clojure

3. The original stack
• Figwheel dev environment (how will I deploy this? will )
• Quiescent with Sablono (instead of Om)
• cljs-ajax (not aware of other choices here)
• Bootstrap 4 (why go beta when you go alpha)

4. http://gateis.red/My project:

8. Let's make a ClojureScript app

9. $ lein new figwheel yourprojectname
Generating fresh 'lein new' figwheel project.
Change into your 'yourprojectname' directory and run 'lein figwheel'
Wait for it to finish compiling
Then open 'http://localhost:3449/index.html' in your browser

10. project.clj
:jvm-opts ["-XX:MaxPermSize=128m" "-server"]
:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.8.51"]
[quiescent "0.3.2"]
[sablono "0.7.2"]]

11. Start figwheel
user> (fig-start)
Figwheel: Starting server at http://0.0.0.0:3449
...
user> (cljs-repl)
...
cljs.user>
$ lein figwheel
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
cljs.user=>
- or from CIDER -

12. A trivial app
(defonce app-state (atom {:count 0}))
(defn bump-counter []
(swap! app-state update-in [:count] inc))
(q/defcomponent Counter [state]
(h/html [:div
[:h1 "The counter is: " (:count state)]
[:button {:onClick bump-counter} "Add one"]]))
(defn render! []
(q/render (Counter @app-state)
(.getElementById js/document "app"))
(js/window.requestAnimationFrame render!))
(render!)

13. Let's deploy the app

14. $ lein do clean, cljsbuild once min
resources/public
├── css
│ └── style.css
├── index.html
└── js
└── compiled
└── yourprojectname.js

15. Upload to S3 bucket

16. Configure S3 for static website
http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

17. Configure DNS