Introduction

Our first Hoplon project

Generating a Hoplon project

Let's start from a working project. Run the following command on your terminal:

boot -d boot/new new -t hoplon -n hoplon-project

You may see several lines printing dependencies being downloaded.

If the command run succesfully, it will create a directory hoplon-project inside the directory where you run the command.

Running the project in development mode

Change your directory to the project:

cd hoplon-project

And run:

boot dev

You will see something like:

Starting reload server on ws://localhost:40781
Writing adzerk/boot_reload/init3509.cljs to connect to ws://localhost:40781...

Starting file watcher (CTRL-C to quit)...

Writing HTML files...
• index.html
Adding :require adzerk.boot-reload.init3509 to index.html.cljs.edn...
Compiling ClojureScript...
• index.html.js
Starting Jetty on port 8000...
2016-10-3022:23:28.859:INFO::clojure-agent-send-off-pool-0: Logging initialized @25640ms
2016-10-3022:23:28.918:INFO:oejs.Server:clojure-agent-send-off-pool-0: jetty-9.3.1.v20150714
2016-10-3022:23:29.033:INFO:oejw.StandardDescriptorProcessor:clojure-agent-send-off-pool-0: NO JSP Support for /, did not find org.eclipse.jetty.jsp.JettyJspServlet
2016-10-3022:23:29.063:INFO:oejsh.ContextHandler:clojure-agent-send-off-pool-0: Started o.e.j.w.WebAppContext@fbcb499{/,file:///home/y/.dotfiles/dotfiles/boot/cache/tmp/home/y/repos/hoplon/hoplon-project/osm/-qel6zf/,AVAILABLE}
2016-10-3022:23:29.072:INFO:oejs.ServerConnector:clojure-agent-send-off-pool-0: Started ServerConnector@f2c7ddd{HTTP/1.1,[http/1.1]}{0.0.0.0:8000}
2016-10-3022:23:29.072:INFO:oejs.Server:clojure-agent-send-off-pool-0: Started @25853ms
Elapsed time: 17.558 sec

As you can see in the last line, it may take a while on the first compilation. After the initial compilation changes in code are compiled pretty fast. We will see that soon.

Open your browser and go to http://localhost:8000. You should see something like the picture below:

You have a working Hoplon project. Congratulations!

Changing and seeing results

Now let's change something. Open the file src/index.cljs.hl inside the project directory, in your favorite editor. You should see the code below:

(page"index.html")(html(head(link:href"app.css":rel"stylesheet":type"text/css"))(body(h1"Hello, Hoplon!")))

Replace "Hello, Hoplon!" with "Hello, Tutorial!" on the last line and save the file. Go back to your browser, the page should update without you reloading it and show the picture below:

Nice work. You created a Hoplon project from a template, run it in dev mode and did a change that was live reloaded on the browser.

Next steps

We will understand a bit more about the Hoplon syntax.