My first AngularJS web app, part 3

In my last installment, I rounded out the architecture of the Minecraft Free News web app I created for my son. Now let’s talk about the server-side implementation.

I host through AWS and serve via an EC2 instance with a typical LAMP stack installation. However, for this particular project, the MySQL and PHP were not required. Apache is used to serve the web app itself — the HTML, CSS, and JavaScript to the client. Thus, when browsing to on port 80, Apache is doing all the work. Easy enough.

After the client web browser receives the HTML/CSS/JavaScript from Apache, it executes the JavaScript which pulls the enabled RSS feed items from the various Minecraft-related websites. However, the JavaScript I wrote also connects to my server via HTTP on a different port to request a special JSON object. This object contains custom HTML information that can be inserted as the top headline (above the “Minecraft Free News” logo), and/or on any line in any column of the content area. Thus, to make day-to-day content modifications to the web app, I need not edit my JavaScript code served by Apache, but instead modify the JSON object being returned by Node. Note that this JSON object is very small: only about 2 KB.

A Node HTTP server is exceedingly simple to configure in just a few lines, and there are countless tutorials available explaining the details. My version is designed quite closely to the example authored in The Node Beginner Book which explains quite nicely and in some detail the reasoning behind its easily extensible design. So in my case, when the client’s browser executes the JavaScript, it connects to my server on the port which Node is listening, and receives the JSON object. The data from that JSON object is then incorporated in content and rendered by Angular. And viola, the web app is complete.