Generate RSS Feed with SvelteKit

RSS Feeds let readers know about new content on your website. SvelteKit provides endpoints that can be used to generate RSS feeds.

Recently I decided to list my most recent articles on my Github Profile README. I found a Github Action that does that from a RSS Feed. This led me to generate a RSS Feed for my blog, which is built with SvelteKit.

permalinkWhat is a RSS Feed?

For my generation, RSS Feed is something we heard about, but that we rarely used. I was curious to see how it works, and how it can be used.

RSS stands for Rich Site Summary. This is a format that has been standardized at the beginning of the 2000’s. RSS feeds are XML files. The XML file is a list of items, each item is a post, an article, anything that users might want to subscribe to, with a publication date, an author, a description, a link, etc.

Users use news aggregators, also called RSS readers, to read RSS feeds. They enter the URI of the feed, and the aggregator will fetch the feed periodically and display news. Users can subscribe to quality feeds they are interested in. Much more different paradigm than keeping scrolling on Twitter!

Other standards have been developed to serve the same purpose, such as Atom. This is the format that I chose for my RSS Feed, which actually is an Atom Feed.

permalinkGenerate the feed with SvelteKit

I did not want to generate the feed by concatenating strings, so I searched a library that does it for me and I found feed. With a nice TypeScript API, you can generate a RSS Feed, an Atom Feed or a JSON Feed.

SvelteKit has the concept of file-based routing. Routes are declared in src/routes directory, the name of the route being the name of the file, minus the extension. SvelteKit allows to create pages that way, but also endpoints, that is, modules that export functions matching HTTP methods.

I created src/routes/feed.xml.ts endpoint with the following code:

ts
import type { RequestHandler } from '@sveltejs/kit';
import { Feed } from 'feed';
import type { Locals } from '$lib/types';
import { APP_URL } from '$lib/env';
import { getBlogPosts } from './writing/_api';
import { urlcat } from '$lib/url';
// This function will be called when SvelteKit server
// receives a GET request for `/feed.xml`.
export const get: RequestHandler<Locals, unknown, string> = () => {
// We get the list of all the blog posts.
// The list is ordered by publication date. The most recent post is at the top.
const blogPosts = getBlogPosts();
// We create the feed, with author's information.
const feed = new Feed({
title: 'Baptiste Devessier',
description: "Baptiste Devessier's blog",
id: APP_URL, // The id is used by RSS readers to identify the feed.
link: APP_URL,
language: 'en',
feedLinks: {
atom: urlcat(APP_URL, '/feed.xml')
},
copyright: '', // The copyright notice. If have none so I left it empty.
author: {
name: 'Baptiste Devessier',
email: 'baptiste@devessier.fr'
}
});
for (const blogPost of blogPosts) {
const href = urlcat(APP_URL, `/writing/${blogPost.slug}/`);
feed.addItem({
id: href,
title: blogPost.title,
link: href,
date: new Date(blogPost.datetime),
description: blogPost.description
});
}
return {
headers: {
// The Atom feed is XML.
'Content-Type': 'application/atom+xml'
},
body: feed.atom1() // We create an Atom feed!
};
};

Please note the name of the endpoint file. Provided that a ESM module is in src/routes directory and ends with .js or .ts, it is an endpoint for SvelteKit. It means that you could even create endpoints named image.jpg.ts or document.pdf.ts to dynamically construct images, PDF documents or whatever. It can also handle other HTTP methods, such as POST or DELETE. Pretty cool, isn’t it?

Next, I add an alternate tag in my src/app.html file. This will allow RSS autodiscovery. All pages will be built on top of the base app.html file.

html
<link rel="alternate" type="application/atom+xml" href="/feed.xml" />

I statically build my portfolio on Netlify by using @sveltejs/adapter-static. It means that there will be no server to listen to requests made to endpoints on production. But this is fine…

When a build is launched, SvelteKit will build the JavaScript code that makes the application work, start a server to intercept requests and will start crawling each link between pages. Because there will be a link to /feed.xml on each of them, SvelteKit will visit this URL and save the generated XML file. The RSS Feed file will be generated automatically during each build!

permalinkFinal note

I have to admit that I am now considering starting to use RSS as a way to be kept informed. I downloaded NetNewsWire and began to add RSS feeds. For now, this is a great discovery!

SvelteKit is really flexible and this is amazing to build sites with it. Endpoints API is so generic that you can use it to handle forms submittings as well as the generation of a RSS Feed. If you have not yet, try SvelteKit!