Kitura Stencil Tutorial: How to make Websites with Swift

Adding Stencil code

From here on out, you’re going to be editing your home.stencil file and checking the output to see what happens.

In Xcode, go to the Views directory, and open home.stencil. Three things to note about this file as you continue.

1. This technically counts as a static file. This means that you can edit this file, save it, and not have to re-run your server to notice the changes! This also means you should build and run your server, and not worry about restarting it for the rest of this tutorial.
2. Xcode is… less than desirable as a non-Swift/Objective-C text editor. To make it marginally better, go to the top menu bar, and select Editor ▸ Syntax Coloring ▸ HTML. I won’t blame you if you kick the tires on Visual Studio Code or Sublime Text.
3. Take a moment to read through the rest of the code, and peek at the accompanying style in index.css if you want. The web client will use something that looks like a UICollectionView with cards to sort all of the entries.

Ready to edit the template file?

Scroll to line 27, which should read like </article>, and after this line, add the following code snippet:

{% for entry in entries %}
<article class="card" 
  style="background-color: #{{ entry.backgroundColorCode }};">
<div class="top-content-box">
  <div class="emoji-date">
    <p>{{ entry.displayDate }}<br>{{ entry.displayTime }}</p>
  </div>
  <input id={{ entry.id }} class="delete-button" type="submit" 
    value="✕" onClick="deleteEntry(this.id)" 
    onEntry="hideEmojiPicker()">
</div>
<p class="emoji-text">{{ entry.emoji }}</p>
</article>
{% endfor %}

Here’s what you’ve just done:

• You create an HTML element called an article, which allows you to classify an element with sub-sections called divs. One of the nice things about HTML is that you can override your CSS file with specific style instructions inline; you do that here with the hex code from backgroundColorCode passed through from your context from Stencil!
• Furthermore, you make nice and immediate use of the two computed properties for the date and time.

• You set up an input element at the top right-hand corner to delete an entry (Mac vs. Windows holy war participants, don’t @ me), but you may notice that you haven’t yet written the function to handle this yet — that’s OK!
• The main course, obviously, is the particular emoji that you are displaying in the card!
• And all of this wrapped in a for loop across entries!

Think about this for a second; you just wrote a way to display however many EmojiJournal entries with one block of HTML, and you did it all with Swift and a little bit of sugar from Stencil!

Reload your browser. Regardless of what user you submitted them under, if you’ve loaded a couple of journal entries to your database, your website should show them:

Nice work! Have you ever wanted to slap your Ray-Bans on, cross your arms, and tell Twitter that you’re a web developer? Spin up your internet machine — you can now!

Where to Go From Here?

You can download the finished project for this tutorial using the Download Materials button at the top or bottom of this page.

Congratulations! You have a working web client now!

The web version of EmojiJournal is not quite yet a fully-featured app, since you’ve not implemented add functionality in the web interface. But you’re well on your way using Stencil with Kitura. See our book Server Side Swift with Kitura for more information on finishing off the web version of EmojiJournal.

Stencil is a very powerful framework for templating, and you should give it a shot on its own. You can check out the GitHub repo for it at https://github.com/stencilproject/Stencil.

If you have any questions or comments on this tutorial, please leave them in the comments