Create an RSS Feed Reader with Node and Vue.js | TJ Fogarty | Skillshare

Create an RSS Feed Reader with Node and Vue.js

TJ Fogarty

Create an RSS Feed Reader with Node and Vue.js

TJ Fogarty

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (36m)
    • 1. Intro

      1:12
    • 2. Setup

      2:50
    • 3. Feed Function

      5:17
    • 4. Feed List

      3:29
    • 5. Article List

      3:07
    • 6. Single Article

      3:04
    • 7. Display Feeds

      5:41
    • 8. Display Articles

      5:13
    • 9. Display a Single Article

      3:42
    • 10. Deployment

      1:56
    • 11. Conclusion

      0:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

152

Students

--

Projects

About This Class

In this class, you will build an RSS feed reader with Node and Vue.js. We’ll cover using command-line utilities to scaffold out a project, and use Github in tandem with Netlify to deploy our app to a live environment.

We will also use “serverless” technology afforded to us by Netlify which can deploy functions to AWS Lambda. We’ll use this to write a service that will consume RSS feeds that can be used in our application.

In a broader sense, this class also aims to show developers that while there are some great products out there that provide RSS feed reading services for a fee, we have the tools and ability to make our own should we wish to learn more, or add our own features.

This class is aimed towards those familiar with Vue.js, but those with enough JavaScript experience should be able to follow along. The service we’ll write for fetching RSS feeds doesn’t require  knowledge of a framework and can be dropped into any  project.

A recent version of Node.js is required. If you would like to follow the deployment steps to Netlify, then a Github and Netlify account are also required (both free).

Meet Your Teacher

Teacher Profile Image

TJ Fogarty

Teacher

Heya, I'm TJ, a web developer from Limerick, Ireland. I mostly work with Vue.js, React, and PHP (Laravel, WordPress, Craft CMS, ExpressionEngine).

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Intro: welcome to building an RSS feed reader with few Js My name's TJ and in this class regatta sector building and deploying an application along with examining some that was available to do this. The reason I chose a feed reader initially was because, although there are already some of great solutions out there, I wanted to try and solve a problem for myself basically, And that's the broader goal of all this. We have the tools, we have the ability. So why not try and solve a problem for ourselves and, hopefully inert something new in the process? If you have any ideas for new features, as you watch lessons definitely take north. They could be the next steps for your own version of this project, and I will be sure your progress or any tweets you've made or any questions you might have . So let's take a look at what would be building. So here it is, our feed reader, so you may be thinking he's clearly not a designer, and you'd be absolutely race. Feel free to take whatever liberties you want with the design you conceive cyclic true feeds. They get articles, and then finally the selected article on all this information is coming from the function which will rice and deploy in the next lesson local true. What will lead to start building our application? 2. Setup: in this lesson will be looking at some of the software will be using to set up our project and then create a project using view. CLI. The first thing we need is note. You see a live version tree requires at least version ace, and you can grab it here from no jess dot org's as a side note. If you're on a Mac, you can use something like Envy em to install a particular version and switch to it. If you need to keep a different version of node on your machine for work or projects that might depend on it, we can see here under important notes. That there are some alternatives suggests that if you're working on a Windows machine, next up is view CLI. We'll be using Version Tree, which is in beta at the moment. It's safeties for our purposes would expect some things to change before the final release . However, the Colby right with still remain valid. It's recommended as well that you install view death truths as it'll make development and debugging a whole lot more visual. It's available for chrome Firefox, and there's an electron app that will work with everything else for source control on deployment. You early in the count on Kid Hub, pickpockets or kit lab of use and get up. But either these three will work just fine. You can set up a free account with any of the services this leads us to notify. We'll use this service the whole star up, which will automatically deploy when we push our changes to our version control provider. It will also host AWS Lambda Functions for us, which we will use to fetch our feets for our purposes. The free plan is more than generous with us. Let's scaffold at our up looking at the view cli documentation. Here we can see that we need to run NPM Install Global View cli that this might take a little wild finish. So feel free to put the Catalan wily ways. I already have it installed, so I'm going toe set up. The project with view creates feed reader. Let's see here that there's a bunch of different options, especially manually select features. From here, you can do things like select typescript configuration or customize Theis Linda configuration. If you need toe for our purposes, though, the default setting will do just fine. OK? No, that's ready. Local winds are new project and they will take a look exactly what's been given to us since I chose the default configuration. You'll see that it's pretty empty at the moment, but we'll leave this for now and in the next lesson will take a look at a plug in for the view cli that will let us write our function to fetch feeds and also tested locally. 3. Feed Function: in this lesson would be writing a function that fetches RSS feeds on returns, a Jason object that will use for our app. The first thing we need is the net. If I land a plug in for view well at this store project by copying the Commander stood here View Ad Network file. Under this will let us call our function from our APP without needing the euro when it gets deployed to nettle. If I It does this by setting approx, eat where the function is running so that it matches the final deployed euro. So you'll see a year in the clan line that it's created some extra files. The Lambda Directory and the root of the project is the compiled cold from what we write in the source Lambda Directory. The nettle fired at Tama File stars. His instructions for nettle fly or what to do when it receives are cold. So it's telling metal if I walk man to run to build a raft, where to find the build version of our and where the functions are locators, so we'll have a look. Now what we have. So first step is we're going to rename this hello dot Js defeat dot Js and then we'll clear it up for the next step. We're going to install a package called RSS Pariser and this will fetch and or assess feet and return. Jason. Now we're going to bring that into our feet. Stop chess. Next, we need our handler function. This is what would be executed when we hit the URL for dysfunction and receive a few arguments. But we're only concerned with the callback one and this is what we used to send back the response for our feats. First thing I'm going to do is set up an array of feeds that I want to see and feel free to . Troy in any that you want here is all. So I have some postal common cold pen, a few things from hacker News Onda a list of what's trending on. Get up specifically what's trending and javascript next up will create a Par Sur from RSS Pariser and this is what would fetch the feeds and return to Jason object. Then we're going to create an array with all of these requests because thes requests are going to be a synchronous we're going to use promise dot all toe wait until everything is ready and then we can send that back is our response. So this is where we're going to use the callback function. The first argument is optional for providing results of a failure while we're interested in is getting these feeds back so we'll pass an object. That's the second argument, and no, for the first first thing we're going to do here. Is that a status code of 200 to say everything's OK? And then we returned the body, which will be Jason, that string if I response okay, and then that's it. So we're going to take it for a test run by running and him run surf and you'll see here. It's after compiling our function code along with the rap, and this will happen whenever you make changes so you don't need to run to separate terminal windows or two separate pains. Toe Catch your project gold. So free visits local host 80 80 was he? That's a wrap. And then if we go toe, let if I functions feeds, we should get our Jason response. There we go. So that's fine for now. Next step is to start writing our view up and the next lesson would set up our component for displaying a list of feeds and get a general field for the structure of our application later on in the class, then will integrase this net if I function in Tora to display everything. 4. Feed List : this lesson would start to set up our application by adding our main feed reader component on a feed lis component. But first, to get started on going tides. Tailwind to the application. Tailwind is utility for our CSS framework that once you get the hang of Letty rapidly put out a decent looking project. It's not everyone's cuppa tea put for our purposes. It's pretty great. So feel free to use whatever you want for styling. It's by no means prescriptive. Small. Copy this line here and paste it into the index dot html file in the public folder. Next, we'll clean up our act that view foil and by just removing everything that we don't need. So in this case, it's most of us, and we don't need to. This it's either. So let's get, uh, put something on the screen. The next we'll create a new folder in components called Feed Reader and in here we're going to add index stock for you. This boy will pull together all the different parts for application and service, the main hope from where the data would flow, so just closed the site prior and for know how to start a header. Next, we're going to display this in our app dot for you. So the importance and then we'll set it in the components property here. Great. So next we're going to craze feed less stop view which will eventually display the list of our feats. So inside the feed Reader folder craze hit list dot few and for now we'll just add another header and safe next. We need to import that feed. Let's stop view back into her index start for you. So we will imported up here and they will displace in the next lesson will take a look at setting up the article list component, which will be a little bit similar to this. 5. Article List : in this lesson was set up. Our article list component is going to be much the same as the feed lis component for now, until we start to bring our feet data into it. So first up will create article is stop view and draw a heading in there. Next, we'll important into index stuff you and displays. This layout isn't going to work very well, so we put a little bit of order on us. We'll wrap her components here in a diff, and we put a class off feet container on us. So we'll use Great is that offers a really nice way of doing their jobs. Left three columns. So I'll set those up like So I'm thinking, maybe 15% for the 1st 2 and then the last car you will take up all the space it meets, and then we'll give it a great gap. About 20 pixels tied some spacing between the columns. One gratis lets out a few classes from Tailwind still update the spacing in a wrap inapt off you. We'll give the container class off container XO, which will give it a maximum width of 1200 pixels and then well, that's imparting. Okay, so good. Then we'll update the rest of our components. That's a margin to tidings. So feed, let's start. Few give this class of and before for some margin bottom. We'll do the same for the list and then finally, index stuff you well. That's emerging to the main heading, and the next lesson will set up her component for displaying a single article. 6. Single Article : this lesson will set up our component for displaying a single article the start off by creating single article docked view in our Feed Reader folder. And then we're not someplace older content in here. So I'm going to bring the same index stopped for you. If we saved us, you can see here that this takes up the remaining space, which is what we want. This so you can see here, Chrome Firefox will do the same. Ensure the layout of our great. So I'm going to go back to a single article and start dropping in placeholder content. Give us a better idea of how would look. It's a lot of class here, just like we did in the other components to give it a bit of marriage and bottom the next poem to need the body of the article. So for now, I'm just going to use a bit of Laura medicine. Finally, we want to have a link to view the article at its original source. So the creator link I just stated that self because we're going to be adding a few attributes here, and I'm going to give it a target of blank. So it opens in a new tab because if we're opening it up in a new tab, will that equals? No opener on This is for security reasons, so the new page can't access the window object on your application via window dot opener. Next. We'll give it a few classes, so we're going to style it a bit like a pardon. So make it in nine block, give the teal background and we hovers ill be a darker shade text to voice, fun polled and then give putting on the Y access little bits and putting on the axe X axis . And finally, no underlying to move the defaults, anchoring styles so few original. And there we go. Okay, so not too bad in the next lesson will start bringing our feeds into the app on display them in the feed lis component. 7. Display Feeds: in this s and we're going to use that function recreated earlier to fetch our feats, we're going to need to make a request, and we can use the Axios package for Left on Soldiers. With NPM installed, Axios continues the integrated terminal, but you can use whatever you want. Then if you use a nice term or hyper or whatever you want and PN still excels. And when that's done on the drop it in up here. So next I'm going to create the data function that we return an object that in store feeds . So it's start off. It's going to be an empty array. Next, when the component is created, I want to make a request to fetch those feats. We'll call the creators, and then we'll have a method called get Feeds. Let's create that. Now. I'm going to use a sin kind of ways because it looks a bit neater on. Did essentially lets us right what looks like synchronous cold so that when you call, don't wait on something. The next statements won't execute until we have what we were waiting for. Liken tooth us, creating way methods with a sink get feeds. I want to extract the data property that comes out. So I'm going to do a bit of restructuring here. I'm going to a waste, the Axios Coal and if you remember, it's Detlev fi slash functions slash feats. And when we have that, we want to assign it, then torta. So let's check that out with a few deft tools to see if we have everything we need. Goto app here, feed reader. Yeah, so you can see it there. Feats. So I supplied three links on. We have three feeds back. If you inspect, um, you can see all the information attached and then the items which are the articles in that block that feed. So no, let's start displaying them. So if we go to our feet, bliss component will wrap this initiative and then we'll create a known order list and I want to accept a prop. So what will have to do next is great script here and then who declare our props. Then we can say fee. If feats and feed start linked and we'll give some classes here will reset the list. Styles will want to make it sticky then as well. So we'll use position sticky to keep us on the page so we don't scroll out of you. I'm going to paint it to the top of the page, give a border bottom and the border color off gray. No. Then we're going to reiterate true the feeds and display a link for each one. So the four feed in feeds and we want to give that key as well. That title should do us and we're creating anchor tag. No, and click it that some glasses to style it up a little bit will remove the default underline. Give it some padding. Set displayed black. So it takes up the full with the area. We'll give it a reporter grave order of one. Excellent. Then we can salute quarter bottom. And this is because we'll have a border bottom on the on order list itself. So we don't layer up those borders extrude colored a little bit with teal and then we over Was that the background to like a really lie? Steal closed that owes And then the text will be the title of the feet. Okay, so we shouldn't see anything. Yes, You don't have any errors. What we need to do is pass that feed object into the feed list. That all looks good. So in the next lesson, we'll look at how to select an active feed on display its list of articles. 8. Display Articles: in this lesson, we're going to look at displaying a list of active girls from a selected feed. So we're back inside our feed lis component. That sounds like what we need to do is that an on click event that fires another event containing a feed, which will end pass back up to index stop view so that, ah, run click here to the anchor tyke and will pick a new methods. Call it select feed that looks at the feed. It's an extra reiterate that method don't accept feed. I'm never going to admit this and we call unset, feed past their feet. Back up back to our index, start for you on the feed lis component. We're going to listen for this event and I called the new method Oregon Trace Pendley Select Feed. So right this new methods just beneath our cat feeds method that'll accept our feed. An expert. Don't I have a look to see what exactly is that we want from this feed object. So we want to crab all the articles. We'll have a look in her a few Deftones. We have a ray of feeds here. Let's have a look up one and yet items makes sense. And yeah, so you can see inside here. This is the content for a single article back in index. That few. I've got to say this, that articles equals feed. Don idols? No, I need to declare that on my tod object. And by default, it will be an empty array. Now, I need to pass that as a prop to my article this component. So we're going to jump. The article is start view, and we're going to need to accept the prop. So called articles say that we check our view Death tools here He's here. Feed reader component andan Empty articles are A When I click on one of these there, you can see the article Zerega populate er's try this horn is there jumped 25. So looks like we're getting the information we need. So let's start looking at how we're going to display it. So in our template here, I'm going to create a wrapping div and then going to crease known organist. And now we're going to be doing pretty much the exact same thing here is we did with displaying the feed list. There will be some duplication. But since it's not happening too frequently, I don't want to over optimize just yes, but feel free to break this out into its own component if you want. So I'm not going to show this list unless we actually have articles. So I'm going to check if it exists on def. There's a length. Next, I'm going to give it some classes, much like the feed lis component. Say list recess to move on the default list styles. It's gonna have position sticky pinned to the top and were given a border bottom off. Gray. Okay, so next we're going toe Renderos the articles I want to say before item in articles, Hand will set key toe. I didn't thought titled. So in here. Now we're going to write her link and we give this some glasses Swell. Solar moves default to underline from the ankle tag. A good bit of padding display block. Give it a border of Cray and we removed the bottom border so it doesn't build up like a date in the field list. Component. 10 will get text color. So teal again. And when we hover, who changed the background toe a lighter. Teal next, Then who gave out the title? Save that. You can see they're coming up there. And as we scroll down, see this stuck here. So that's what the position sticky is doing. So when the next lesson, we're going to look at selecting an article and then displaying that. 9. Display a Single Article : this lesson. We're work on displaying a selected article. So jumping back into article, it's that few as before, we'll need to add a click handler to our anchor take on click se select article and passed that I So next we need to write that right that create that here, Select particle, which accepts the article. And as before, we will limit the event Once a on select art and pastoral some expiry to jump back to index Start for you and honor article this component here, we're going to listen for that event. So I'm select particle. We're going to call handle select jumping down here Well, at a belief her handle select feed and will say this thought selected article start. So next we're going toe at this selected article to our data object on by default will set it. No, finally, Then in here we're going to pass us as a prop to our single article component. It's a article IHS Electric start. It's never going to utter a single article component. And if we scroll down, we're going toe at our script tag and we're going to accept the problem. So I called this article next, but I want to display anything. If we don't have anything, Song would say V if so lonely show When we have an actual value for article, we come back toe our view. Debt tools. Onda We just have a look at one of these just to see what properties we can get from an article. So we have the contents will display that we have a link. Andre have a title. It's those should be enough for what we need. So we can simply carrying out some of these who se article a title and then for the contents. What we can do is have active on. We can say the HTML is article dark contact that would render the actual HTML That's provided so I can guarantee this and for the link here we can say article adopt like So let's give it a try. Just put a stake here so all of this should be called selected article, and that's passed in there. So if you give this another try, yeah, so we can see this is showing up as we want and this is a little bit close. So what I'll do is I'll give a little bit of margin to the content. Great. So that's looking to do the job and the next lesson. Well, get ready for deployment by hooking up. Get hub on net if I 10. Deployment: and this s and we'll take a quick look at connect and get up to ratify which will then in the deploying her up. I've pushed my core to get over people, and there is flying that I want to look at before we connect the two. But remember when we added the net lifelike log into view? It generated this neck employed at tomah file, and the Streak Man's would be responsible for what Net fighters when it receives her cold. So this 1st 1 here for a command. This is what essentially, when our cold gets deployed to notify. So in this case, I'm running in PM run, build. You can use yarn if that's what you want to use on. That will generate a dist. Folder here which is assigned to publish. So this is what net. If I will essentially publish then to their servers. And finally we have dysfunctions option. And this is where our feeds function. It's stored. So once you sign up for natural, if I could see a screen like this, I already have my project deployed. But I'll just step true what you'll be doing. So you see this new site from guests, and under the continuous deployment section, you'll have a choice of Get home, get lab or a pit Bacchus. The process for all these would be the same. When you select one will present you a list of your repositories, you pick the one that you want, then you'll get an overview screen. From here, you see a list of all the deployments that have ever happened on. Did it live up days? Whenever you make any changes to your repository, you're given a link here, which old people share has would be great to see what you've made and maybe any tweaks you've made perhaps the styling or any new little bits of functionality that you might add . And you can see from this thing only when his life here. In the meantime, I've made it my own few tweaks for some of the styles, so you can see what was selectors. Andi, I've added in a couple of other feeds. Then, as well. In the next video, we'll do a recap of what people 11. Conclusion: So in this class we put to get our feed reader with few, Js is deploying from next vice we could on our land a function locally. Finally, we pushed alternatively for automatic deployment. Anytime we make changes Target Repository Well, we've enjoyed the lessons and gotten something useful from them. There's definitely room for improvement here, So think of this as a certain point. If you want to develop further, for example, you could use a few ex for state management. You could do something like fire base to attach a database for things like favorite in articles. So please feel free to pull slip your work and any questions you might have so that, you know, learn thanks, you know the best.