In contrast to the lab “Basic web application by Ring”, this lab gets one step closer to a real web application. We will use Compojurehttps://github.com/weavejester/compojure in this lab. Compojure is a web application framework that works on top of Ring. Compojure does a lot of jobs necessary to create a web application. Using Compojure, we can focus more on creating web pages.
As always, the first thing we do is create a Clojure project.
BUT it’s not
lein new here. We will type in
lein new compojure instead.
Advice to coaches
lein new compojure works on Leiningen 2.0.0 and later.
If attendees are using Leiningen 1, install compojure-template
following the instructions at https://github.com/weavejester/compojure-template.
Alternatively, upgrade Leiningen to the latest version.
We don’t need to edit
project.clj since the command above does basic setup.
We don’t even need to write code. A simple web application is already there.
So the next step is to start the server.
Once the web server starts, a web page pops up with the message “Hello World”.
Glance at the files that have been created by the lein command.
. ├── README.md ├── project.clj ├── resources │ └── public ├── src │ └── hello_compojure │ └── handler.clj ├── target │ ├── classes │ └── stale │ └── extract-native.dependencies └── test └── hello_compojure └── test └── handler.clj
src/hello_compojure/handler.clj. The file should be the same as the example below.
Change the words of line 7 and reload the web page on the browser. You’ll see the updated words.
Our web application is already set up to serve static pages. Let’s add a static page.
You can put static pages in
resources/public or its subdirectories.
Create a file
resources └── public └── helloworld.html
On the browser, go to the URL
You’ll see the page that you just created.
Again, edit the HTML file and reload the same page on the browser.
Advice to coaches
The stylesheet is static, so we will add
style.css under the
Web developers/designers usually create a directory just for CSS. Following this practice, create a
resources └── public ├── css │ └── style.css └── helloworld.html
style.css should look like this:
We need to do one more thing. Out HTML file should know that the CSS file exists.
style.css, add line 6 to
Go to the browser and request
You’ll see that the appearance has changed because of the stylesheet.