Templating Vapor Applications with Leaf

May 7 2021 , Swift 5, macOS 11, Xcode 12 Swift 5, macOS 11, Xcode 12

Use Leaf, Vapor’s templating engine, to build a front-end website to consume your server-side Swift API! By Tim Condon.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 3 of 3 of this article. Click here to view the first page.
Contents

Contents

Hide contents

Templating Vapor Applications with Leaf

20 mins

Acronym Detail Page

Now, you need a page to show the details for each acronym.

At the end of WebsiteController.swift, create another struct to pass as input to Leaf input which will represent all the details of an acronym:

struct AcronymContext: Encodable {
  let title: String
  let acronym: Acronym
  let user: User
}

This AcronymContext contains a title for the page, the acronym itself and the user who created the acronym.

Create the following route handler for the acronym detail page after WebsiteController.indexHandler(_:):

// 1
func acronymHandler(_ req: Request) -> EventLoopFuture<View> {
  // 2
  Acronym.find(req.parameters.get("acronymID"), on: req.db)
    .unwrap(or: Abort(.notFound))
    .flatMap { acronym in
      // 3
      acronym.$user.get(on: req.db).flatMap { user in
        // 4
        let context = AcronymContext(
          title: acronym.short, 
          acronym: acronym, 
          user: user)
        return req.view.render("acronym", context)
      }
  }
}

Here’s what this route handler does:

  1. Declares a new route handler, acronymHandler(_:), that returns EventLoopFuture<View>.
  2. Searches for the acronym with the request’s parameters and unwraps the result. If no acronym is found with the given ID, it will return a 404 Not Found.
  3. Gets the user that created the acronym and unwraps the result.
  4. Creates an AcronymContext that contains the appropriate details and renders the page using the acronym.leaf template.

Finally register the route handler at the bottom of WebsiteController.boot(routes:) for the /acronyms/<ACRONYM ID> route path:

routes.get("acronyms", ":acronymID", use: acronymHandler)

Create the acronym.leaf template inside the Resources/Views directory and open the new file and add the following:

<!DOCTYPE html>
<!-- 1 -->
<html lang="en">
<head>
  <meta charset="utf-8" />
  <!-- 2 -->
  <title>#(title) | Acronyms</title>
</head>
<body>
  <!-- 3 -->
  <h1>#(acronym.short)</h1>
  <!-- 4 -->
  <h2>#(acronym.long)</h2>

  <!-- 5 -->
  <p>Created by #(user.name)</p>
</body>
</html>

Here’s what this template does:

  1. Declares an HTML5 page like index.leaf.
  2. Sets the title to the value that’s passed in.
  3. Prints the acronym’s short property in an <h1> heading.
  4. Prints the acronym’s long property in an <h2> heading.
  5. Displays the user’s name that created the acronym in a <p> block

Now that the detail template is made, the index.leaf template can be updated to provide a link to navigate to a given acronym’s detail page.

Open index.leaf and replace the first table cell – <td>#(acronym.short)</td> – for each acronym with:

<td><a href="/acronyms/#(acronym.id)">#(acronym.short)</a></td>

This wraps the acronym’s short property in an HTML <a> tag, which is a link. The link sets the URL for each acronym to the route registered above.

Build and run, then refresh the page in the browser:

Acronyms with links

You’ll see that each acronym’s short form is now a link.

Click the link and the browser navigates to the acronym’s page:

Acronym detail page

Where to Go From Here?

This tutorial introduced Leaf and showed you how to start building a dynamic website to display data provided by your Vapor API.

If you enjoyed this tutorial, why not check out our full-length book on Vapor development: Server-Side Swift with Vapor?

If you’re a beginner to web development, but have worked with Swift for some time, you’ll find it’s easy to create robust, fully-featured web apps and web APIs with Vapor 4.

Whether you’re looking to create a backend for your iOS app, or want to create fully-featured web apps, Vapor is the perfect platform for you.

Questions or comments on this tutorial? Leave them in the comment section below!