title: How to serve static files using Spock and Lucid?
body: <p>Getting started with web development using Haskell, Spock, and Lucid, I can't figure out how to serve my static files. In the directory of <code>Main.hs</code> I have <code>/static/css/main.css</code>, which contains just a background colour to see if the css is indeed applied. So my directory tree looks like</p>
  
  <pre><code>app
  ├── Main.hs
  └── static
      └── css
          └── main.css
  </code></pre>
  
  <p>However, with the below configuration, the <code>main.css</code> file is not found (it contains a 404 when inspecting it with Firefox). Other than that, the site shows fine.</p>
  
  <p>I have tried to mimick the <a href="https://github.com/agrafix/funblog" rel="nofollow noreferrer">funblog</a> example when it comes to serving these files (with Wai), altered for Lucid instead of Blaze. In particular the <code>middleware $ staticPolicy (addBase "static")</code> from <a href="https://github.com/agrafix/funblog/blob/65c2b41019ae3a3bd04a2ffb92e028f167295c7d/src/Web/Blog.hs#L87" rel="nofollow noreferrer"><code>Web/Blog.hs</code></a> and the line where we link the css from <a href="https://github.com/agrafix/funblog/blob/65c2b41019ae3a3bd04a2ffb92e028f167295c7d/src/Web/Views/Site.hs#L28" rel="nofollow noreferrer"><code>Web/Views/Site.hs</code></a>.</p>
  
  <pre><code>module Main where    
  
  import           Network.Wai.Middleware.Static
  import           Lucid
  import           Web.Spock
  import           Web.Spock.Config
  import           Web.Spock.Lucid         (lucid)
  
  type Server a = SpockM () () () a
  
  main :: IO ()
  main = do
    cfg &lt;- defaultSpockCfg () PCNoDatabase ()
    runSpock 8080 (spock cfg app)
  
  app :: Server ()
  app = do
    middleware $ staticPolicy (addBase "static")
    get root $ do
      lucid $ do
          head_ $ link_ [ rel_ "stylesheet"
                        , type_ "text/css"
                        , href_ "/css/main.css" 
                        ]
          body_ $ h1_ "Hello."
  </code></pre>
  
  <p><hr>
  <strong>Edit/Addition</strong> Translating the Lucid to Blaze gives the same result (translation as below), so I must be missing something somewhere else. </p>
  
  <pre><code>-- Additional imports
  import           Text.Blaze.XHtml5             ((!))
  import qualified Text.Blaze.XHtml5             as H
  import qualified Text.Blaze.XHtml5.Attributes  as A
  import           Control.Monad.Trans           (MonadIO)
  import           Text.Blaze.Html.Renderer.Utf8 (renderHtml)
  
  -- The main function did not change. 
  
  blaze :: MonadIO m =&gt; H.Html -&gt; ActionCtxT ctx m a
  blaze = lazyBytes . renderHtml
  
  app :: Server ()
  app = do
    middleware $ staticPolicy (addBase "static")
    get root $
      blaze $ do 
        H.head $
          H.link ! A.href "/css/main.css" ! A.rel "stylesheet"
        H.body $
          H.h1 "Hello Blaze."
  </code></pre>