DIY RSS Feed Reader

Publisher: TJ Fogarty

Modified: 2018-03-13

There’s a whole heap of ser­vices and apps out there for col­lat­ing your own per­son­alised list of RSS feeds, and dis­cov­er­ing new ones. They all work pret­ty well, and I’d hap­pi­ly rec­om­mend a good few of them.

How­ev­er, I’m a sim­ple guy with sim­ple needs. So sim­ple in fact, that I fig­ured I’d build my own. I know how that comes across, and the more I re-type and re-read that line the more I hate myself, but I don’t need a lot of fea­tures; I want to have a list of feeds, a list of arti­cles for a feed, and a view for a sin­gle arti­cle. I don’t need a save for lat­er’ fea­ture; I can use Instapa­per for that. I don’t need a way to share them; I can use some­thing like Buffer. I want to read a thing, that’s all.

Feed Me #

I like JavaScript, and hav­ing a JSON object with data in it that I can iter­ate over is ide­al. How do I get that JSON, though? After a cou­ple of key­strokes on NPM I found rss-pars­er. It does exact­ly what I was look­ing for; you pass a URL to a feed, and get JSON back.

This is too straight-for­ward, though. How do I over­com­pli­cate this?

I cre­at­ed a lit­tle project that uses Express to respond to a GET request which returns my feed data.

const express = require('express');
const Parser = require('rss-parser');
const PORT = process.env.PORT || 5000;

const FEED_LIST = [
  'https://css-tricks.com/feed/',
  'https://codepen.io/posts/feed',
  'https://blog.safia.rocks/rss',
  'https://hnrss.org/frontpage',
  'https://tj.ie/feed.rss',
  'http://github-trends.ryotarai.info/rss/github_trends_javascript_daily.rss'
];

let app = express();

app
  .get('/', (req, res) => {
    let parser = new Parser();

    const feedRequests = FEED_LIST.map(feed => {
      return parser.parseURL(feed);
    })

    Promise.all(feedRequests).then(response => {
      res.setHeader('Access-Control-Allow-Origin', '*');
      // res.setHeader('Access-Control-Allow-Origin', 'some-domain-to-allow.com');
      res.header('Access-Control-Allow-Methods', 'GET');
      res.json(response);
    })
  })
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

Run­ning node index.js and vis­it­ing http://localhost:5000 in your brows­er then should return a boun­ty of data.

You could do this with any lan­guage you fan­cy. You might already have a host­ing plan where you can fire up a PHP script to do the same thing. For me, I chose Heroku because of their free plan and inte­gra­tion with GitHub. It suits me to add a feed to the list by updat­ing an array let­ting Heroku deploy it.

Heroku #

To get going with Heroku I need­ed to do a few things:

  • Sign up for the free plan
  • Cre­ate a new Node.js app from their dashboard
  • Final­ly, from their dash­board, enable GitHub inte­gra­tion and select the repo and branch I want­ed and enable auto­mat­ic deploys

Next was some con­fig­u­ra­tion — I need­ed to tell Heroku how to run the app.

To spec­i­fy what com­mand to run (in this case node index.js), I cre­at­ed a new file called Procfile in the root of my project. This file con­tains some process types, and there’s a few, but in this case we only need the web process type to fire up our lit­tle Express app. So with that, our Procfile looks exact­ly like this:

web: node index.js

The final piece was to cre­ate an app.json file. This acts as a sort of descrip­tion of our app. In this case, it’s a name, descrip­tion and what dock­er image to use. The dock­er image will con­tain the envi­ron­ment of our app, in this case it’s Node.js.

{
  "name": "Feeds App",
  "description": "Returns RSS feeds in JSON",
  "image": "heroku/nodejs"
}

After push­ing your changes, you should see from the dash­board that your app is deploy­ing, and when it’s ready click­ing on Open App in the top-right cor­ner of your dash­board opens it up in a new tab. 

On the free plan, the app will soft­ly fall asleep if there’s been no traf­fic to it for 30 min­utes. It’ll wake up again on the next vis­it, but it’ll just take a few moments before you get a response while it fum­bles for the alarm clock to turn it off, or maybe burst it off a wall.

Front-end #

So this is where it gets far less spe­cif­ic. The means are there to get the data, now it’s a mat­ter of how to dis­play it. For me, I used Vue and host­ed it using Code­Pen Projects. You can have a look at the source and the demo if you’re inter­est­ed. I most­ly work with React, so any chance I get to use Vue I usu­al­ly take it.

It was a pret­ty fun week­end project and it gave me the chance to play with some tech­nolo­gies that I oth­er­wise wouldn’t get to use. I treat these projects like a play­ground for some inter­est­ing tech I want to learn while also solv­ing a prob­lem for myself. I want­ed an RSS read­er that I could tin­ker with, so now it’s there. I’ll prob­a­bly keep iter­at­ing on it, but it raised an inter­est­ing thought for me: I spend my life build­ing things for clients to solve their prob­lems. Why not build some­thing for myself, and sort my own stuff out?