Dynamic routes and page hooks in Feather CMS on top 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 easy, all people loves looking the world huge net by means of 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 method is to make use of a search engine optimization 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 information.

So when a shopper asks for a particular route (path, URL, no matter… e.g. /foo) the server must resolve what to return. This determination 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: Software) throws 
    app.get("foo")  req -> String in
        return "bar"
    

That is completely fantastic, however fairly a static method. By static I imply that you must alter the Swift code if you wish to register a brand new route. You additionally need to rebuild and ultimately redeploy the server software if you wish to mirror the adjustments. That is programmer pleasant, however not so person pleasant.

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

So, how can we register dynamic routes utilizing Feather and permit the top person to specify customized endpoints? Is it attainable to put in writing the web page in Swift and afterward connect the code to an endpoint?

Dynamic routes in Feather CMS

With a view to write a web page in Swift and register it afterward below a dynamic path part you must implement a customized web page hook operate. That is fairly easy, you simply need to create a brand new module and implement the invoke technique similar to we did it for the frontend-page hook within the Feather CMS module tutorial publish. A customized web page hook is a particular hook operate the place you explicitly set the title of the hook with a -page suffix. The static module will permit you to render this web page through a particular content filter, extra about this half afterward. 💪

import Vapor
import Fluent
import ViperKit

last class FooModule: ViperModule 

    static var title: String = "foo-module"

    func invoke(title: String, req: Request, params: [String : Any] = [:]) -> EventLoopFuture<Any?>? 
        swap title 
        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 needs to be related to a FrontendContentModel object. You will can retreive this mannequin as an enter parameter and use it in the event you want particular frontend associated attributes in the course of the rendering course of. Please remember that you all the time need to return a future with an ordinary Response sort. It is because hooks are very particular capabilities and the web page hook can solely work with Response objects, you possibly can all the time use the encodeResponse technique in many of the circumstances. Within the hook you must 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 in the event you do not care an excessive amount of about this whole 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 manner you possibly can log in to the CMS and create a brand new web page with a novel 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.

In case you click on on the attention icon on the highest left nook it is best to be capable of 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 in the event you return to the admin it is best to see somewhat feather icon subsequent to the preview button, in the event you click on on you could 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 forth.

You’ll be able to all the time change the slug and hook up your web page into a brand new route. If you press the save button (or hit cmd+s) the adjustments will likely be stay instantly, no must rebuild your backend server in any respect. In fact, in the event 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 typically. 🔨

The important thing takeaway right here is you could 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 you must change the URL of a publish or a web page, however you continue to have the chance to create a daily web page or publish utilizing the admin interface. You need to use HTML or markdown or you possibly can all the time build your own content filter for Feather CMS in the event you want extra customized conduct. If you do not know the place to begin with Feather, it is best to read my getting started tutorial, when you’ve got points, please report on GitHub or submit a PR.