daslu / holygrail

Demo of a restartable back-end in the REPL + hot-reloadable front-end in the browser.

Holy grail demo - forked for some experimenting

What is it?

This demonstrates the “holy grail” workflow for web development the way I envision it: a restartable back-end in the REPL + a hot-reloadable front-end in the browser.

Demo

Make sure boot-clj is installed. This is the awesome build tool that makes this worflow possible.

Clone this repo, cd into it and start the development pipeline build.

$ git clone [email protected]:danielsz/holygrail.git
$ cd holygrail
$ boot dev

This starts the build pipeline. Pay attention to the line that says:

nREPL server started on port 49722 on host 127.0.0.1 - nrepl://127.0.0.1:49722

Launch your favorite editor, and connect to the headless REPL (M-x cider-connect in Emacs works great). The N Type:

(go)

In the browser, go to http://localhost:3000

You will see a simple web app that doesn’t do much, but the point is the workflow. In other words, the possibilities to develop both APIs and client-side functionality in the most comfortable way. Let’s demonstrate this.

Open the file src/clj/real_time/handler.clj. Let’s add a route:

(defroutes app-routes
  (GET "/" [] (-> (resp/resource-response "index.html")
                     (resp/content-type "text/html")))
  (GET "/foo" [] (str "<h1>Hello, world</h1>")) ;; let’s add this
  (route/not-found "Not Found"))

Now save the file, go to your REPL, and type:

(reset)

In the browser, type http://localhost:3000/foo. You’ve just worked on the backend, made a change, and restarted it from the REPL. How cool is that?

Now let’s do a change client-side. Open src/cljs/real_time/core.cljs and on line 26 change the string for Value from “submit” to “send”. Save the file. The change is reflected automatically in the browser. How cool is that?

Do you feel the creative juices flow? Aren’t you all set to dive in the zone for endless hours of sheer creative output?!