Using Plot To Write HTML With Swift On A Vapor Server
Daily Coding Tip 065
You should be able to install Vapor if you have homebrew by running brew install vapor in Terminal. Otherwise you might need to follow the other installation instructions. When installed, there is also a Hello World project that you can generate by running vapor new hello -n in a folder of your choice.
The example project is a Swift package that you can open with Xcode. Running the default scheme gives you a Swift server that says Hello World when you go to localhost:8080.
Open packages.swift and add Plot to the package dependencies and product dependencies:
Create a new Swift file called Extensions. We’re going to extend Response from Vapor and HTML from Plot to make it easier to do what we need with both packages.
Now my HTML relies on an image of some mountains, but you can use any image you want. The important thing is that the image should be in a folder called Public in your Swift package, along with a CSS file called styles.css.
This CSS file has some useful styles that will be applied to our HTML:
The main thing to note here is that we are applying a 100% width to images. We are also customising the font and the colour of the header of our HTML. The component below gives the Image an explicit class, as this seemed to work better than relying on the image tag alone for some reason.
The routes function can be given the Plot HTML type directly thanks to the extensions we added earlier.