Have you noticed that our application is very plain-looking? In this lesson, we will add some style to make it look pretty.

First, let's standardize the index.html by adding a proper HTML structure.

<html>
  <head>
    <title>Application</title>
    <link rel="stylesheet" href="/public/style.css">
    <meta charset="utf-8">
  </head>

  <body>
    <main>
      <h1>All Articles</h1>
    </main>
  </body>
</html>

Reloading the browser shouldn't show any difference, except the nice title for the tab.

title.png

Also, notice that we've added a link to a public/style.css file under the <head> tag.

Let's create a new public directory with the following style.css file in it.

/* weby/public/style.css */

main {
  width: 600px;
  margin: 1em auto;
  font-family: sans-serif;
}

Now reload the page.

It's not working! 😣

Our page looks the same, and none of the styles are getting applied.

Before proceeding, can you guess why it's not working?

Let's inspect the response in the DevTools window.

no-route-style.png

Notice the response: "no route found for /public/style.css"

Since we haven't added a route for the style.css fiIe, our application doesn't know which file to serve when the browser sends a request for it.

We could fix this by adding a new route, so that our application can serve the stylesheet.

However, you can see it can get quite cumbersome as we add more stylesheets and images. In addition, since a stylesheet is a static file, i.e. its content is not generated dynamically using Ruby.

It would be nice if there was a declarative way to specify all the static files we'd like to serve from a common directory, so our application doesn't have to worry about it.

The good news is that there's an existing solution to solve this exact problem.