Search code examples
herokuclojurecompojureringhtml-rendering

css won't modify html in clojure/heroku web-app


I am making a simple Clojure web-app to be deployed on Heroku consisting of one html and one css file. I created the file using the "lein new heroku MYAPP" command and am trying to modify it from a simple "hello world" to have it render an html file in another folder on startup. I have managed to get the html to load on a local host in my browser, but it is not being modified by the css when I do it. What do I need to change to get the css to modify the html to have it render properly in the browser and then deploy to heroku?

html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <img id="sun" src="http://goo.gl/dEEssP">
        <div id='earth-orbit'>
            <img id="earth" src="http://goo.gl/o3YWu9">
        </div>
    </body>
</html>

project.clj

(defproject solar_system "1.0.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://solar_system.herokuapp.com"
  :license {:name "FIXME: choose"
            :url "http://example.com/FIXME"}
  :dependencies [[org.clojure/clojure "1.5.1"]
                 [compojure "1.1.1"]
                 [ring/ring-jetty-adapter "1.1.0"]
                 [ring/ring-devel "1.1.0"]
                 [ring-basic-authentication "1.0.1"]
                 [environ "0.2.1"]
                 [com.cemerick/drawbridge "0.0.6"]]
  :uberjar-name "solar_system-standalone.jar"
  :min-lein-version "2.0.0"
  :plugins [[environ/environ.lein "0.2.1"]]
  :hooks [environ.leiningen.hooks]
  :profiles {:production {:env {:production true}}})

web.clj:

(ns solar_system.web
  (:require [compojure.core :refer [defroutes GET PUT POST DELETE ANY]]
            [compojure.handler :refer [site]]
            [compojure.route :as route]
            [clojure.java.io :as io]
            [ring.middleware.stacktrace :as trace]
            [ring.middleware.session :as session]
            [ring.middleware.session.cookie :as cookie]
            [ring.adapter.jetty :as jetty]
            [ring.middleware.basic-authentication :as basic]
            [cemerick.drawbridge :as drawbridge]
            [environ.core :refer [env]]))

(defn- authenticated? [user pass]
  ;; TODO: heroku config:add REPL_USER=[...] REPL_PASSWORD=[...]
  (= [user pass] [(env :repl-user false) (env :repl-password false)]))

(def ^:private drawbridge
  (-> (drawbridge/ring-handler)
      (session/wrap-session)
      (basic/wrap-basic-authentication authenticated?)))

(defroutes app
  (ANY "/repl" {:as req}
       (drawbridge req))
  (GET "/" []
       {:status 200
        :headers {"Content-Type" "text/html"}
        :body (slurp (io/resource "index.html"))})  
  (ANY "*" []
       (route/not-found (slurp (io/resource "404.html")))))

(defn wrap-error-page [handler]
  (fn [req]
    (try (handler req)
         (catch Exception e
           {:status 500
            :headers {"Content-Type" "text/html"}
            :body (slurp (io/resource "500.html"))}))))

(defn -main [& [port]]
  (let [port (Integer. (or port (env :port) 5000))
        ;; TODO: heroku config:add SESSION_SECRET=$RANDOM_16_CHARS
        store (cookie/cookie-store {:key (env :session-secret)})]
    (jetty/run-jetty (-> #'app
                         ((if (env :production)
                            wrap-error-page
                            trace/wrap-stacktrace))
                         (site {:session {:store store}}))
                     {:port port :join? false})))

;; For interactive development:
;; (.stop server)
;; (def server (-main))

here is the directory tree. The html and css files are in resources (with the error.html files), web.clj is in src/solar_system and project.clj is in the root folder:

solar_system
├── resources
├── src
│   └── solar_system
├── target
│   ├── classes
│   └── stale
└── test
    └── solar_system

Solution

  • I don't know why the lein new heroku _ template doesn't do this for you.

    Use compojure.route/resources to tell the handler where to look for static files.

    (defroutes app
      (ANY "/repl" ...)
      (GET "/" [] ...)  
      (route/resources "/")
      (ANY "*" [] ...))
    

    Now, if you visit http://example.com/style.css, it will expect resources/public/style.css.

    Aside: It's better to serve static assets from resources/public/ rather than resources/ because you may want to have resources/secrets.txt without anybody being able to access it.