Day19 - Astro Series: RSS Endpoint

@ Astro

A beautiful gradient background with a title: "RSS Endpoint"

Introduction

In previous chapters we learned how to use Markdown or MDX, define data schemas, and query data in content collections. This chapter explains how to create endpoints in Astro to provide different types of data and implements generating an RSS file as a hands-on exercise.

Endpoints

What is an endpoint? In a static site mode, an endpoint is a .ts or .js file that generates various types of files; in SSR mode an endpoint becomes a live server API.

What is RSS

RSS is a standardized format — a specific XML file format — designed to push the latest updates to site users. It’s cumbersome for users to manually visit a site to check for updates, so RSS provides a convenient way to selectively push site news to users.

In short, you need an RSS XML file at your site’s root that contains the data you want to publish, and users can track site updates via that file. This can be achieved by creating an endpoint and using an RSS integration.

Static file endpoint (generate a JSON file)

Step 1: Create the endpoint

Add a .js or .ts file to the /pages directory. The file extension will be removed during the build, so prefix the name with the extension of the static file you want to create. For example: src/pages/data.json.ts will generate src/pages/data.json.

Step 2: Export the GET function

With this, a JSON file at /foobar.json containing {"message":"Hello World"} will be generated. Creating files with endpoints is that simple.

foobar.json.ts
export async function GET() {
  return new Response(
    JSON.stringify({
      message: 'Hello World',
    }),
  );
}

Creating RSS

Step 1: Install and configure the RSS integration

Astro provides an integration to automate generating RSS files. First install @astrojs/rss and specify the site🔗 parameter in your astro.config file (Astro RSS uses this parameter to generate its content).

Terminal window
npm install @astrojs/rss

Step 2: Create the endpoint

As in the previous example, add a .js or .ts file to the /pages directory. This time we want the endpoint to be in XML format, so name the file rss.xml.ts. In that file, use the @astrojs/rss integration along with data fetched from your content collection to quickly and automatically generate the site’s RSS XML file:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';


export const GET = async (context) => {
  const posts = await getCollection('post');
  const avaliablePosts = posts.filter((post) => !post.data.isDraft);


  const rssContent = await rss({
    title: 'Custom title',
    description: 'Custom Description',
    site: context.site,
    items: avaliablePosts.map((post) => ({
      title: post.data.titleTC,
      description: post.data.excerpt,
      pubDate: post.data.publishDate,
      link: `post/${post.slug}`,
    })),
  });


  return new Response(rssContent.body);
};

Summary

If your site updates infrequently or your users don’t really use RSS, creating an RSS feed may not be necessary. Still, it’s a good exercise to try. In the next chapter we’ll create more practical features using endpoints — stay tuned!

It’s recommended to try this yourself; if you run into issues, you can refer to my example🔗:

  • Try creating a static endpoint
  • Try building an RSS feed for your own site

Further reading