Dynamic routes and web page hooks in Feather CMS on prime of Vapor 4

Routing in Vapor 4

Clicking a hyperlink in your browser normally takes you to a brand new web page on some web site. That is fairly easy, all people loves searching the world vast internet by clicking hyperlinks, proper? 😅

The opposite a part of the story occurs on the server aspect behind the scenes. A backend server can deal with a given URL in a number of methods, however these days the most well-liked strategy is to make use of a search engine optimisation pleasant part (let’s name this path) to find out the content material that must be returned as a response to the shopper (browser), after all we’re utilizing the HTTP protocol to switch knowledge.

So when a shopper asks for a particular route (path, URL, no matter… e.g. /foo) the server must determine what to return. This resolution making course of known as routing. In Vapor 4 you may simply setup route handlers for a particular endpoint.

import Vapor

public func configure(_ app: Software) throws {
    app.get("foo") { req -> String in
        return "bar"
    }
}

That is completely nice, however fairly a static strategy. By static I imply that you need to alter the Swift code if you wish to register a brand new route. You additionally should rebuild and finally redeploy the server software if you wish to mirror the modifications. That is programmer pleasant, however not so person pleasant.

One other factor is that you need to be particular about your path once you setup your routes, in any other case you need to use the catchall sample if you wish to deal with dynamic routes. Typically this may additionally result in some surprising issues, nevertheless it’s not the tip of the world. Vapor is ready for the problem and the framework handles this downside in such a sublime means. Good job crew Vapor. 👍

So, how will we register dynamic routes utilizing Feather and permit the tip person to specify customized endpoints? Is it potential to jot down the web page in Swift and in a while connect the code to an endpoint?

Dynamic routes in Feather CMS

In an effort to write a web page in Swift and register it in a while beneath a dynamic path part you need to implement a customized web page hook perform. That is fairly easy, you simply should create a brand new module and implement the invoke methodology identical to we did it for the frontend-page hook within the Feather CMS module tutorial submit. A customized web page hook is a particular hook perform the place you explicitly set the identify of the hook with a -page suffix. The static module will let you render this web page through a particular content material filter, extra about this half in a while. 💪

import Vapor
import Fluent
import ViperKit

ultimate class FooModule: ViperModule {

    static var identify: String = "foo-module"

    func invoke(identify: String, req: Request, params: [String : Any] = [:]) -> EventLoopFuture<Any?>? {
        change identify {
        case "foo-page":
            let content material = params["page-content"] as! FrontendContentModel
            return attempt! self.renderPage(req: req, web page: content material).map { $0 as Any }
        default:
            return nil
        }
    }
    
    func renderPage(req: Request, web page content material: FrontendContentModel) throws -> EventLoopFuture<Response> {
        req.eventLoop.future("foo").encodeResponse(for: req)
    }
}

The code is fairly easy, each single web page must be related to a FrontendContentModel object. You will can retreive this mannequin as an enter parameter and use it when you want particular frontend associated attributes in the course of the rendering course of. Please remember that you all the time should return a future with a normal Response kind. It is because hooks are very particular features and the web page hook can solely work with Response objects, you may all the time use the encodeResponse methodology in many of the circumstances. Within the hook you need to forged as soon as extra to Any, as a result of we love casting dynamic sorts in strongly typed languages. Anyway, it really works nice in follow… 🙈

So when you do not care an excessive amount of about this whole kind casting hell, you may merely place your current Vapor route handler into the render perform and return the output as a response. This fashion you may log in to the CMS and create a brand new web page with a singular slug for it. Let me present you the way to do that actual fast. After you log in as an admin, simply open the “Static / Pages” menu merchandise from the dashboard and create a brand new web page with the [foo-page] shortcode content material. Give it a reputation and press save.

When you click on on the attention icon on the highest left nook it is best to be capable to see the draft model of your web page. As you may see it is only a clean web page with the uncooked “foo” textual content on it, nothing particular, however hey, be at liberty to use Leaf and render some precise content material. Now when you return to the admin it is best to see just a little feather icon subsequent to the preview button, when you click on on that you would be able to edit the user-facing content material particulars of your web page, such because the slug (path, permalink, URL, no matter you name it), meta title and outline, social preview picture, publish date, content material filters and so on.

You may all the time change the slug and hook up your web page into a brand new route. Whenever you press the save button (or hit cmd+s) the modifications will likely be stay instantly, no have to rebuild your backend server in any respect. After all, when you tousled your code on the primary place you continue to have to repair that earlier than you may hook it up, however hopefully that will not occur too typically. 🔨

The important thing takeaway right here is that you would be able to write your code in Swift and in a while hook the web page as much as a particular route utilizing a dynamic strategy. That is actual good if you need to change the URL of a submit or a web page, however you continue to have the chance to create a daily web page or submit utilizing the admin interface. You need to use HTML or markdown or you may all the time construct your personal content material filter for Feather CMS when you want extra customized habits. If you do not know the place to begin with Feather, it is best to learn my getting began tutorial, when you’ve got points, please report on GitHub or submit a PR.