RSS is a popular standard for distributing web content in a structured format. Many people, from tech enthusiasts to teachers, use RSS to stay up-to-date with the latest news and posts on their favorite blogs.
Writing your own RSS reader is a straightforward task, made even easier with SvelteKit, a meta framework built on top of Svelte.
Setting Up the SvelteKit Project
The code used in this project is available in aGitHub repositoryand is free for you to use under the MIT license. If you want to have a look at a live version of this project, you may check out thisdemo.
Before proceeding, you need to have the Node.js runtime installed on your machine as well asNode Package Manager (NPM). Open your terminal and run the following command:
This should start up the create-svelteCommand Line Interface (CLI)powered by Vite. Name your project and set the app template to “Skeleton project”. Disable type checking with TypeScript, and select any additional options you want. After that, switch to the project directory and run:
After installing the default dependencies, you need to install two packages namely:rss-parserandmoment. The first package will make it easier to parse the XML data, while the second one will help you format dates correctly. In your terminal, run the following:
Now, you can start up the development server by running the following command.
Clear the contents of theApp.cssfile and modify the project structure such that it looks something like the following. Create any directories that do not already exist and create empty files to match those named below:
You’ll only need to change thesrcdirectory, which should contain alibdirectory and alib/addToLocalStorage.jsfile. It should also contain aroutesdirectory that contains a child directory namedfeedand four files:+layout.js,+layout.svelte,+page.svelte, and+server.js. Insidefeed, create a directory named[title]with two files inside:+page.server.jsand+page.svelte.
You may struggle to create the[title]directory on the command line since many shells use square brackets for pattern matching. If you get an error, try quoting the directory name, e.g.:
Creating the API Route to Check for Valid RSS Feeds
Open theroutes/+server.jsfile and import thejsonutilty. Also importParserfrom therss-parserpackage.
Now, export an asynchronous function,GET, and pass inurlas a parameter. In this function, create two constants:rssLinkandparser.
The first constant should hold the search parameter from theurlpassed, while the second,parser, should store a newParserobject instance. Next, call theparseURLmethod onparserand pass inrssLinkas a parameter. Finally, serialize the response with thejsonfunction and return it.
Designing the Home Page
SvelteKit uses afilesystem-based routing system. By default, theroutes/+page.sveltefile serves as the home page for your website.
Open the +page.svelte file and, in thescripttag, import theaddToLocalStoragefunction from thelibdirectory. You haven’t created this yet, but you’ll do so later. After importing the function, create two variables,urlandready, setting thereadyvariable tofalse.
In the markup section, add the following:
The code block above defines aninputelement that sets thereadyvariable totrueif the length of the user input is greater than zero. Next, add the code to render some elements ifreadyistruthy.
This code block checks ifreadyis truthy, then makes a call to the API route you created earlier. This code is responsible for checking if the URL the user entered points to a valid RSS feed.
Finally, add some basic styling for the page like this:
Setting Up the Layout
Add the following code to thelayout.jsfile. This code will tell Svelte to run the+layout.sveltefile on the client only:
Next, in the+layout.sveltefile, return the list of feeds from local storage.
Next, add the markup for a navbar like this:
Add aslotcomponent and the styling for the layout:
Adding a Valid URL to Local Storage
Once the app confirms that an RSS feed exists, it is a good idea to have a mechanism to save that URL in local storage, so that the user won’t have to re-enter it. Open theaddToLocalStorage.jsfile and add the following:
This code uses thesetItemmethod onlocalStorageto cache an array containing data about the user’s feeds.
Rendering the List of Entries for a Particular RSS Feed
Add the following to the[title]/+page.server.jsfile:
This is the code that will run alongside the+page.sveltefile. It fetches the latest entries from a particular feed. Now, in the+page.sveltefile, import themomentpackage, and add adataprop:
Next, render an image if it’s available and traverse through each item in thedata.itemsarray, rendering the appropriate content:
Finally, style the page as you wish:
You have now created a very simple RSS reader with SvelteKit.
What Is RSS Suitable For?
If you find yourself juggling multiple websites, blogs, news sources, or podcasts, RSS is your gateway to a more organized and time-efficient reading experience.
Bear in mind that, while RSS is a fantastic tool for content aggregation and keeping up with news, it’s not well-suited for real-time, interactive, highly secure, or highly personalized content scenarios.
