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

Routing in Vapor 4

Clicking a hyperlink in your browser often takes you to a brand new web page on some web site. That is fairly simple, all people loves looking the world broad net by means of clicking hyperlinks, proper? 😅

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

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

import Vapor

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

That is completely nice, however fairly a static method. By static I imply that it’s important to alter the Swift code if you wish to register a brand new route. You additionally must rebuild and finally redeploy the server utility if you wish to replicate the modifications. That is programmer pleasant, however not so consumer pleasant.

One other factor is that it’s important to be particular about your path once you setup your routes, in any other case it’s important to use the catchall sample if you wish to deal with dynamic routes. Generally this may additionally result in some sudden issues, nevertheless it’s not the top of the world. Vapor is ready for the difficulty and the framework handles this downside in such a sublime approach. Good job group Vapor. 👍

So, how will we register dynamic routes utilizing Feather and permit the top consumer to specify customized endpoints? Is it attainable to write down the web page in Swift and afterward connect the code to an endpoint?

Dynamic routes in Feather CMS

As a way to write a web page in Swift and register it afterward underneath a dynamic path element it’s important to implement a customized web page hook operate. That is fairly easy, you simply must create a brand new module and implement the invoke technique identical to we did it for the frontend-page hook within the Feather CMS module tutorial put up. A customized web page hook is a particular hook operate the place you explicitly set the identify of the hook with a -page suffix. The static module will mean you can render this web page through a particular content material filter, extra about this half afterward. 💪

import Vapor
import Fluent
import ViperKit

remaining class FooModule: ViperModule {

    static var identify: String = "foo-module"

    func invoke(identify: String, req: Request, params: [String : Any] = [:]) -> EventLoopFuture<Any?>? {
        swap identify {
        case "foo-page":
            let content material = params["page-content"] as! FrontendContentModel
            return strive! 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 should you want particular frontend associated attributes in the course of the rendering course of. Please take into account that you at all times must return a future with a regular Response sort. It is because hooks are very particular capabilities and the web page hook can solely work with Response objects, you possibly can at all times use the encodeResponse technique in a lot of the circumstances. Within the hook it’s important to forged as soon as extra to Any, as a result of we love casting dynamic varieties in strongly typed languages. Anyway, it really works nice in follow… 🙈

So should you do not care an excessive amount of about this complete sort casting hell, you possibly can merely place your current Vapor route handler into the render operate and return the output as a response. This fashion you possibly can log in to the CMS and create a brand new web page with a singular slug for it. Let me present you ways 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.

If you happen to click on on the attention icon on the highest left nook you must have the ability to see the draft model of your web page. As you possibly can see it is only a clean web page with the uncooked “foo” textual content on it, nothing particular, however hey, be happy to use Leaf and render some precise content material. Now should you return to the admin you must see just a little feather icon subsequent to the preview button, should you click on on that you may 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 many others.

You possibly can at all times change the slug and hook up your web page into a brand new route. While you press the save button (or hit cmd+s) the modifications shall be reside instantly, no must rebuild your backend server in any respect. After all, should you tousled your code on the primary place you continue to have to repair that earlier than you possibly can hook it up, however hopefully that will not occur too usually. 🔨

The important thing takeaway right here is that you may write your code in Swift and afterward hook the web page as much as a particular route utilizing a dynamic method. That is actual good if it’s important to change the URL of a put up or a web page, however you continue to have the chance to create an everyday web page or put up utilizing the admin interface. You need to use HTML or markdown or you possibly can at all times construct your personal content material filter for Feather CMS should you want extra customized conduct. If you do not know the place to start out with Feather, you must learn my getting began tutorial, you probably have points, please report on GitHub or submit a PR.