Monday, August 21, 2017

Getting Started with Cordova and ClojureScript

This is a small writeup about getting started quickly with Cordova and ClojureScript.

1. Install cordova as usual.
$ sudo npm install -g cordova
2. Create an app.
$ cordova create MyApp
3. Add platform.
$ cd MyApp
$ cordova platform add ios
Cordova app is all set. Now instead of JavaScript we want to use ClojureScript. This part can be treated as a separate project. Write ClojureScript, compile it to JavaScript, place it in the www folder of the cordova project and build the project as usual with appropriate overrides in the respective platform folders.

Install leiningen, Java 8, Clojure 1.8.
1. Create a lein project. (We are inside MyApp folder).
$ lein new my-app
2. Update the project.clj as shown.
(defproject myapp "0.1.0"
:description "My Lovely App"
:url "http://example.com"
:plugins [[lein-cljsbuild "1.1.7"]]
:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.521"]]
:cljsbuild {
:builds [{
:id "core"
:source-paths ["src"]
:compiler {
:output-to "../www/js/myapp.js"
:optimizations :whitespace
:pretty-print true}}]})
The source folder is the src in the my-app directory. Now we are ready to write some code.
3. The main file inside src is com/example/myapp/core.cljs
(ns com.example.myapp.core)

(defn foo []
(println "Hello, World!")) ; Note we use println rather than console.log

(enable-console-print!) ; this translates the println to console.log
(set! js/foo foo) ; export the function declared in this module (namespace) to global
3. Compile the ClojureScript to JavaScript. This will watch for modifications and auto compile every time.
lein cljsbuild auto
4. Include the my-app.js in the index.html file and load it in the browser. Open console and type foo(), which will print Hello, World! to the console.
5. We can hot reload code using
lein trampoline cljsbuild repl-listen

Now we are in the right path to building lovely apps with ClojureScript and Apache Cordova!