Getting started with Vapor

Johann Kerr
7 min readJan 30, 2017

--

Swift on the Server

Last year at WWDC, Apple showed off the concept of server-side-swift utilizing IBM’s Kitura framework. The concept of using Swift on the server has taken the entire Swift community by storm and has lead to the advent of several other frameworks such as Vapor, Zewo and Perfect.

Why do we need Swift on the server?

For many iOS developers, one of the biggest hurdles in building apps has been the difficulty finding someone to build a backend for their app. Many developers have come up with ideas for applications but became stumped by the question of “Where do I store my data?” Some have had the fortune of working closely with friends who are web developers, and some have taught themselves Ruby on Rails or Node.js to actualize their dreams themselves. Some have even opted to utilize Backend-as-a-Service platforms (BAAS) such as Parse and Firebase. Parse was originally the go-to BAAS until Facebook purchased it, and then shortly after announced that it was shutting down.

With the development of server-side-swift frameworks, iOS developers now have the ability to create websites and app backends using the very same language they have become proficient using. Even someone relatively new to Swift can easily create their own website using the language. For this tutorial we will be using Vapor, as it is the easiest to get started with and has a rapidly growing community.

Let’s get started

Step 1 - Check if your computer is compatible with Vapor

First, you need to ensure your computer is compatible with Vapor. You should have at least Xcode 8 and Swift 3 installed.

Run the following to see if your computer is compatible.

curl -sL check.vapor.sh | bash
How to see if your computer is compatible with Vapor

Once you confirm that your computer is compatible you must now install the Vapor toolbox.

Step 2 - Install the Vapor Toolbox

curl -sL toolbox.vapor.sh | bash
Installing the Vapor toolbox

The Vapor toolbox is useful since it provides you with a variety of nifty terminal commands to help you manage projects.

Step 3 — Create a new Vapor App

Let’s use the Vapor toolbox to generate our very own Vapor app. Go to Terminal and type the following:

vapor new helloSwift
Creating a new Vapor Project

Now that we have generated a new project called helloSwift, we can go into this directory using cd helloSwift.

Open this folder in Finder and take a look at its contents,

The main.swift highlighted in the image above is where we will be working for this tutorial. Before we proceed, you may have noticed there is no .xcodeproj, so how do we use Xcode to work with these files? It is totally okay to proceed using a text editor such as Sublime or Atom, but I would highly recommend using Xcode since it comes with its built-in code completion and compile time error checking. But the question remains, how do we open this folder without a .xcodeproj file? Yet again, Vapor comes in and simplifies this project.

Step 4 — Generate an Xcode project file

Run the following to create an Xcode project.

vapor xcode
Using vapor to create an Xcode project

Now that you have your Xcode project open scroll down to the main.swift file. It can be found under the Sources group. -Sources/App/main.swift

Once you have found the main.swift file, you will want to run your project. Before hitting the run button we need to change the target of our application from helloSwift to App.

Now hit the Run button or Cmd + R to see your project run.

Once your program is finished building and has started running, you will the following message in your console.

Server running on 0.0.0.8080

The last line of the console message is letting you know that your server project is running on 0.0.0.0:8080 which is sometimes known as localhost. If you copy and paste it into the address bar in your favorite web browser you will see Vapor up and running. 0.0.0.0 is the IP address your app is running on, which signifies your local computer. :8080 signifies the port that your app is running on. You may also type in localhost:8080 and it will take you to the same page.

Hurray! Your very first Swift on the Server project is running. You are now a web developer! Okay not exactly but at least we’re on the road to there.

Now that we have gotten our server running let’s add some routes to our website.

Step 5 — Create your own custom routes

Imagine for a moment that a user would like to go to 0.0.0.0:8080/helloswift and is expecting to see a message from the server saying “Hello Swift”. How would we go about doing this? Head back to your main.swif and add the following lines under your first route in your main.swift file. (This file should come before the drop.run()line)

// 1
drop.get("helloswift") { request in
// 2
return "Hello Swift"
}
  1. This adds a GET route at localhost:8080/helloswift. The closure produces always produces a variable, which I highly recommend naming request. This request variable is of the Request type that has been provided to us by Vapor. This variable makes it easy for us to query information from the user such as data or parameters. We will not be going further into this for this tutorial but in future parts we will be.
  2. This is the response sent to the user once the navigate to our webpage in their browser. Our response is simply the returned string “Hello Swift”

Your code should look something like this now.

Let’s break this down for a second. When a user goes to localhost:8080/helloswift, this is the user making a GET request to our website at the route helloswift Therefore on line 11, we handle a get request to the string value “helloswift”. Once a user request is sent to this route we return the string “Hello Swift” to our user which is then displayed in the browser. Lets hit Cmd+ R and see it in our browser.

Okay so this is pretty simple let’s try doing something more interesting. Let’s see if we can add a route where a user can add their name and the respective message is Hello *Insert Name*. For example, if we go to localhost:8080/hello/johann we should see Hello johann . We first need to create a new GET route to hello that takes a String. Below your last route add the following lines.

// 1
drop.get("hello", String.self) { request, name in
//2
return "Hello \(name)"
}
  1. This adds a GET route at localhost:8080/hello/*someString* You should notice that we have included a new variable in the request closure called name The name variable corresponds to the String.self value. If we navigate in our browser to localhost:8080/hello/learn, the value of name becomes learn
  2. Now that name has a value we can return a response to the user that includes its value .

Now lets hit Cmd + R and see it run in our browser

Voila! We’ve created a website with a two routes using Swift on the Server. Now it’s your turn to try creating a few more routes using Swift. Good Luck!

Stay tuned for Part 2 of this Vapor series.

--

--

Johann Kerr

Software Engineer @FlatironSchool, formerly Lead iOS & Web Instructor at //