Server-Side Swift Developer Blog Entry #0x01: Hello World in Plot with Vapor

You are going to learn how to use Plot, a DSL for writing HTML from John Sundell, with the Vapor framework.

This Hello World tutorial requires that you have Swift and Vapor installed. This code was written on macOS using Xcode, but should work on Linux as well.

Use the command line to create a new Vapor app:

devdir $: vapor new HelloVaporPlot

With the editor of your choice, pop open ./HelloVaporPlot/Package.swift, and add the following package into your dependencies:

    url: "https://github.com/johnsundell/plot.git

    from: "0.10.0"

Additionally, add the following product to your App .target dependencies

    name: "Plot"

    package: "plot"

Your Package.swift should look something like the code below:

// swift-tools-version:5.5

import PackageDescription

let package = Package(

    name: "HelloPlot",

    platforms: [

       .macOS(.v12)

    ],

    dependencies: [

        // 💧 A server-side Swift web framework.

        .package(url: "https://github.com/vapor/vapor.git", from: "4.0.0"),

        .package(url: "https://github.com/johnsundell/plot.git", from: "0.10.0"),

    ],

    targets: [

        .target(

            name: "App",

            dependencies: [

                .product(name: "Vapor", package: "vapor"), .product(name: "Plot" ,package: "plot" )

            ],

            swiftSettings: [

                // Enable better optimizations when building in Release configuration. Despite the use of

                // the `.unsafeFlags` construct required by SwiftPM, this flag is recommended for Release

                // builds. See <https://github.com/swift-server/guides/blob/main/docs/building.md#building-for-production> for details.

                .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release))

            ]

        ),

        .executableTarget(name: "Run", dependencies: [.target(name: "App")]),

        .testTarget(name: "AppTests", dependencies: [

            .target(name: "App"),

            .product(name: "XCTVapor", package: "vapor"),

        ])

    ]

)

Now, we are going to head over to ./HelloVaporPlot/Sources/App/routes.swift

At the bottom of the file, add an extension to HTML so that it conforms to ResponseEncodable. There is probably a more responsible place to stash the extension, but it works here.

extension HTML : ResponseEncodable {

    public func encodeResponse(for request: Request) -> EventLoopFuture<Response> {

        let res = Response(headers: ["content-type": "text/html; charset=utf-8"], body: .init(string: self.render()))

        return res.encodeResponse(for: request)

    }

}

The last step is to add the route with the Plot code to the bottom of the routes function:

app.get("helloplot") { req -> HTML in

        HTML(

            .head(

                .title("Plot on Vapor")

            ),

            .body(

                .div(

                    .h1("Hello Swift Developer!")

                )

            )

        )

    }

Now, build and run, and hit the endpoint http://127.0.0.1:8080/helloplot to see your work in action!

Citations:

I got some help from the following pages:

• https://inuk.blog/posts/plot-and-vapor/
• https://medium.com/@andreabellotto88/how-to-use-plot-in-vapor-3-0-404316ce24c0
• https://github.com/johnsundell/plot