1.2 Setup and App Walkthrough

Before we just jump right in and start writing code, let's very briefly go over what you will need to follow along in this course. And it's a very short list. You need an HTTP server because we are going to be making some Ajax requests. So the easiest HTTP server to get up a running is with Node.js. I mean there's many other options, but this is very quick. So go to Node.js.org, download the LTS version, the version number really doesn't matter as far as we are concerned. Because we aren't really writing a Node application. But download and install the LTS, take the defaults, and then you'll be good to go as far as that is concerned. Now, if you have any qualms about installing Node.js, don't. Because it is a very useful tool that you will definitely use for your own projects, either be they hobby projects or projects that other people will use. So just install Node.js and you will be good to go. After you do that, then you will want to download the source code from GitHub for this course. And there's going to be a folder called start that's going to contain everything that you need in order to get started. And so in the command line, you will want to go to wherever that start folder is after you download it, and say mpm install. And that is going to install everything that's needed to get our HTTP server up and running. It doesn't take very long to install and once it's done, we will say npm run server and that will get our HTTP server up and running. And it will tell us where to go, localhost at port 3000, so we can point our browser there, and there we go. Now, the nice thing about this particular HTTP server is that it is watching our HTML, CSS and JavaScript files. So any time that they change, it's going to refresh the browser, which is going to save us time, so that's a really good thing. Now as far as the UI is concerned, we have three panes, although right now, it looks like we have two. But on the left hand side we have our feeds, this is going to be two things but we could add more if we wanted to. They are contained inside of this feeds.json file, you can see that there's the Tuts+ Twitter Feed and then the PRS Guitars feed, because I like guitars. So these are the two feeds that are going to be listed here, you can see that there are these name properties. Well, we're going to use the names here. Whenever we click on one of them, it's going to retrieve the items for that feed and list them in this middle pane here. And then whenever we click on one of those things, it's going to load the content of that item over here on the right-hand side. We can't really see it because it kind of blends in with the items. But there are three panes, in fact, if we look at the HTML, we will see that there are three panes, here's the feeds. We have an ID here of feed-list-container so that we can refer to that and then add the feeds as we need to here. The same thing for the items which by the way, as far as the UI is concerned, we're going to call them items. But inside of the code, we will call them articles because when atom and RSS were originally created, they were done so for websites that had articles. So items can get very, very, very generic and very confusing because we will have feed items and article items and item items and every other type of item. So it just kinda makes sense to not use items, as far as our code terminology is concerned unless if we're talking about a collection of feeds, or a collection of articles. So that is where we're going to put our articles. And then we have the reading pane here that's going to be the content. Now, there are some dependencies that we are using as far as Ajax is concerned. I'm using Axios because that's really the best tool in my opinion. For parsing our RSS feeds, we're going to use an npm package called RSS parser. But we aren't installing the npm package and then using it that way, instead what I've done is I've used this raw git service. This will take the raw resources on github and turn it into a cdn, so that we can use it in the browser that way. We could distribute it but I don't want to include the license and all of that stuff, so there is that. And then, as far as CSS is concerned, we have Bootstrap, we have FontAwesome in case of we want to use any awesome fonts. I don't think we do, but it's there, just to have them there, and then we have the CSS for our application. We're not going to go over the CSS, because there's quite a lot and we probably won't be touching the CSS, so there we go. Well, in the next lesson, we will start writing our JavaScript code. And we will focus on our feed list, we will retrieve it from our JSON file, and then we will render our feed list in the browser.