In this Deno Fresh middleware video, we see just how middleware works in Deno Fresh and how the developer experience is enhanced compared to other platforms. First we see how you can update HTTP headers on a route-by-route basis. Then, with the preliminaries out of the way, we move on to see what middleware is and how you can use it. We end by using Deno Fresh middleware to add HTTP security headers to all routes from a single location. Finally, testing locally, we run an instant deploy and bask in the glory of our new SecurityHeaders.com A rating!
Anyway, that is enough of an introduction, if you still think you’re in the right place then hit play below on the video! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.
- Getting Started with Deno Fresh post,
- Fresh docs on middleware ,
- SecurityHeaders.com ,
- Mozilla Observability Security Scanner ,
- Element chat: #Rodney matrix chat ,
- Twitter handle: @askRodney .
- Deno deploy is an Edge hosting service which deploys your Deno apps instantly. Because it already likes on the edge, you can add your middleware in your app. As an example Deno Fresh supports this intrinsically, with no need to create a separate functions folder for your host or anything of that nature. You can use the middleware to update security headers or page HTML body. On top you might want to check for an authorisation cookie and redirect the visitor to the log page, it they are not yet logged in.
- Middleware runs just before a user request hits the destination server endpoint. In effect it intercepts the request. In Deno Fresh, you just create a `_middleware.ts` file in the `routes` directory. Add a handler there and Deno Fresh will apply it to all routes on your site. Let's day you have a /newsfeed route on your site that is always changing. If you wanted to add middleware there to set more appropriate caching headers, this is also easy. Just create a routes/newsfeed directory and place a `_middleware.ts` file in there. This middleware file will only apply to the newsfeed route and any child routes you might define.
- You can set HTTP header on an API route just by returning a Response object with the headers set within the second parameter. On a page route with a handler where you are already rendering server-side fetched data (with context.render), that context.render call actually returns a Response object. Instead of immediately returning the result, put it into a response variable. Now you can response.headers.set("Header-Name", "header value"') to set the header. Finally return the modofied header. Of course this works for any HTTP and not just security headers.
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @[email protected] on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. Also subscribe to the newsletter to keep up-to-date with our latest projects.