sample application

In this section, we will be building a very simple blogging platform to show you how easy it is to build a site with Joodo. This application will not have any bells or whistles, as it is meant for the sole purpose of teaching you how to use Joodo.

Creating the App Skeleton

If you have followed our installation instructions creating our starting point is as simple as running the following command, where sample_app is the name you'd like to give your application:

lein joodo new sample_app

To see what that made for us, change into the sample_app's directory in terminal (cd sample_app) and download the project's dependencies:

lein deps

Now, start the local server with the following command:

lein joodo server

Then go to http://localhost:8080 in your favorite browser, where you should see the joodo welcome page.

Open up the sample app directory to take a look at the files. Your directory should look like this:

The heart of any Leiningen project is the project.clj file. This file lists information about your project. You can add descriptions, change version numbers, add dependencies, and much more in this file. More info about the project.clj file can be found on the latest tutorial on Leiningen's github account. NOTE: The project.clj file in the sample app includes set-up code for both Leiningen 1 and Leiningen 2. Delete the code for the version you are not using.

Let's add a logo. All images used by a Joodo application are stored in the public/images/ directory, and your views are located in src/sample_app/view. The latest version of Joodo uses the .hiccup extenstion for all view files, but also supports the older .hiccup.clj extension.

Place an image file with your logo into the images directory and then we can display it by editing our src/sample_app/view/layout.hiccup.clj file. Add the following inside the body of your layout file:

[:img {:src "/images/logo.png"}]

As you'll notice, your page is displaying your logo and Joodo's starting page. Delete all of the markup in the src/sample_app/view/index.hiccup.clj file to clean up the page.

The Basics

The most important file in your project is the src/root.clj.

(ns sample_app.core
  (:require [compojure.core :only (defroutes GET)]
            [compojure.route :only (not-found)]
            [joodo.middleware.view-context :only (wrap-view-context)]
            [joodo.views :only (render-template render-html)]
            [joodo.controllers :only (controller-router)]))

(defroutes sample_app-routes
  (GET "/" [] (render-template "index"))
  (controller-router 'sample_app.controller)
  (not-found (render-template "not_found" :template-root "sample_app/view" 
                                          :ns `sample_app.view.view-helpers)))

(def app-handler
  (->
    sample_app-routes
    (wrap-view-context :template-root "sample_app/view" :ns `sample_app.view.view-helpers)))

By default there are three sections of root.clj. It is important to keep in mind that you can modify/add sections to fit your project's needs. These are just there to get you started.

The first section declares the file's namespace and lists all of the file's dependencies. If you want a deeper look into what root.clj does you can find the method/macro definitions that are being used in this section.

The second section calls a macro called defroutes. This macro is responsible for defining the routes of the website. By default it sets a GET request on the '/' route to render a pre-made index page. It also tells the application to render a pre-made 404 page if a non-existent route is accessed.

The most interesting part of the second section tells Joodo to look for any files with namespaces starting with 'sample_app.controller and add the routes that they define to the list of routes. We'll cover this more deeply in a later section.

The third section wraps information around the request. By default, the only property explicitly being wrapped is the view context. It sets the template root to the view directory and sets all of the view's namespaces to a view-helper. It is important to note that the template-root represents the location of view pages with a relative path starting at your project's src directory.

Since our sample application will be pretty standard, we don't need to modify this file.