Home iOS & Swift Books Server-Side Swift with Vapor

14
Templating with Leaf Written by Tim Condon

Note: This update is an early-access release. This chapter has not yet been updated to Vapor 4.

In a previous section of the book, you learned how to create an API using Vapor and Fluent. You then learned how to create an iOS client to consume the API. In this section, you’ll create another client — a website. You’ll see how to use Leaf to create dynamic websites in Vapor applications.

Leaf

Leaf is Vapor’s templating language. A templating language allows you to pass information to a page so it can generate the final HTML without knowing everything up front. For example, in the TIL application, you don’t know every acronym that users will create when you deploy your application. Templating allows you handle this with ease.

Templating languages also allow you to reduce duplication in your webpages. Instead of multiple pages for acronyms, you create a single template and set the properties specific to displaying a particular acronym. If you decide to change the way you display an acronym, you only need change your code in one place and all acronym pages will show the new format.

Finally, templating languages allow you to embed templates into other templates. For example, if you have navigation on your website, you can create a single template that generates the code for your navigation. You embed the navigation template in all templates that need navigation rather than duplicating code.

Configuring Leaf

To use Leaf, you need to add it to your project as a dependency. Using the TIL application from Chapter 11, “Testing”, or the starter project from this chapter, open Package.swift. Replace its contents with the following:

// swift-tools-version:4.0
import PackageDescription

let package = Package(
  name: "TILApp",
  dependencies: [
    .package(
      url: "https://github.com/vapor/vapor.git",
      from: "3.0.0"),
    .package(
      url: "https://github.com/vapor/fluent-postgresql.git",
      from: "1.0.0"),
    .package(
      url: "https://github.com/vapor/leaf.git",
      from: "3.0.0")
  ],
  targets: [
    .target(name: "App",
            dependencies: ["FluentPostgreSQL",
                           "Vapor",
                           "Leaf"]),
    .target(name: "Run", dependencies: ["App"]),
    .testTarget(name: "AppTests", dependencies: ["App"]),
  ]
)
mkdir -p Resources/Views
touch Sources/App/Controllers/WebsiteController.swift
vapor xcode -y

Rendering a page

Open WebsiteController.swift and create a new type to hold all the website routes and a route that returns an index template:

import Vapor
import Leaf

// 1
struct WebsiteController: RouteCollection {
  // 2
  func boot(router: Router) throws {
    // 3
    router.get(use: indexHandler)
  }

  // 4
  func indexHandler(_ req: Request) throws -> Future<View> {
    // 5
    return try req.view().render("index")
  }
}
<!DOCTYPE html>
#// 1
<html lang="en">
<head>
  <meta charset="utf-8" />
  #// 2
  <title>Hello World</title>
</head>
<body>
  #// 3
  <h1>Hello World</h1>
</body>
</html>
let websiteController = WebsiteController()
try router.register(collection: websiteController)
import Leaf
try services.register(LeafProvider())
config.prefer(LeafRenderer.self, for: ViewRenderer.self)

Injecting variables

The template is currently just a static page and not at all impressive! Make the page more dynamic, open index.leaf and change the <title> line to the following:

<title>#(title) | Acronyms</title>
struct IndexContext: Encodable {
  let title: String
}
func indexHandler(_ req: Request) throws -> Future<View> {
  // 1
  let context = IndexContext(title: "Home page")
  // 2
  return try req.view().render("index", context)
}

Using tags

The home page of the TIL website should display a list of all the acronyms. Still in WebsiteController.swift, add a new property to IndexContext underneath title:

let acronyms: [Acronym]?
func indexHandler(_ req: Request) throws -> Future<View> {
  // 1
  return Acronym.query(on: req)
    .all()
    .flatMap(to: View.self) { acronyms in
      // 2
      let acronymsData = acronyms.isEmpty ? nil : acronyms
      let context = IndexContext(
        title: "Home page",
        acronyms: acronymsData)
      return try req.view().render("index", context)
  }
}
#// 1
<h1>Acronyms</h1>

#// 2
#if(acronyms) {
  #// 3
  <table>
    <thead>
      <tr>
        <th>Short</th>
        <th>Long</th>
      </tr>
    </thead>
    <tbody>
      #// 4
      #for(acronym in acronyms) {
        <tr>
          #// 5
          <td>#(acronym.short)</td>
          <td>#(acronym.long)</td>
        </tr>
      }
    </tbody>
  </table>
#// 6
} else {
  <h2>There aren’t any acronyms yet!</h2>
}

Acronym detail page

Now, you need a page to show the details for each acronym. At the end of WebsiteController.swift, create a new type to hold the context for this page:

struct AcronymContext: Encodable {
  let title: String
  let acronym: Acronym
  let user: User
}
// 1
func acronymHandler(_ req: Request) throws -> Future<View> {
  // 2
  return try req.parameters.next(Acronym.self)
    .flatMap(to: View.self) { acronym in
      // 3
      return acronym.user
        .get(on: req)
        .flatMap(to: View.self) { user in
          // 4
          let context = AcronymContext(
            title: acronym.short,
            acronym: acronym,
            user: user)
          return try req.view().render("acronym", context)
      }
  }
}
router.get("acronyms", Acronym.parameter, use: acronymHandler)
<!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>
<td><a href="/acronyms/#(acronym.id)">#(acronym.short)</a></td>

Where to go from here?

This chapter introduced Leaf and showed you how to start building a dynamic website. The next chapters in this section show you how to embed templates into other templates, beautify your application and create acronyms from the website.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.