Displaying Blog Posts – Node.js Tutorial for Beginners

In this tutorial, we’ll be displaying blog posts to our visitors. To do this, we first create a variable that will store our blog posts. Then, we’ll display these blog posts  to our visitors.

In a practical application you would use a database to store and retrieve our blog posts. In a future tutorial, we’ll take a look at some database options, but for now we’ll be storing all our data in memory.

Update your script to this.

var http    =   require( "http" );

var posts   =   [
    {
        "title": "My First Blog Post!",
        "content": "WELCOME!"
    },
    {
        "title": "Node.js is awesome!",
        "content": "It really is!"
    }
];

var server  =   http.createServer(function( request, response){
    response.write( "<h1>Welcome to my blog!</h1>");
    response.end();
});

server.listen( 8080 );

We’re doing nothing special here. We create a variable called posts that will store our data in JSON format. We insert 2 dummy posts that will serve as a starting point. We’ll make it so we can add more posts to our blog in the next tutorial. First things first, we have to now display this data.

Displaying Blog Posts

Update the function for handling requests with the following code below.

var server  =   http.createServer(function( request, response){
    response.write( "<h1>Welcome to my blog!</h1>");
    response.write( "<a href='/create'>Create a new Post!</a>");
    for( var i = 0; i < posts.length; i++ ){
        response.write("<h3>" + posts[i].title + "</h3>");
        response.write("<p>" + posts[i].content + "</p>");
    }

    response.end();
});

Once again, we’re not doing anything special here. After our welcome message, we’re adding a link to the page where users will be able to create blog posts. After that, we start displaying our blog posts by looping through the posts variable and then using the write() method to display it’s contents.

Routing

You’re probably familiar with routing if you’ve done some Ruby on Rails. If not, then you can think of routing as a way to specify URLs and how your application should react accordingly. Routes can be simple or very dynamic. Let’s update our function to the code below to see how routing works.

var server  =   http.createServer(function( request, response){
    console.log( request.url );
    if(request.url  == "/create" ){
        // Create Blog Post Page Here!
    }else{
        response.write( "<h1>Welcome to my blog!</h1>");
        response.write( "<a href='/create'>Create a new Post!</a>");
        for( var i = 0; i < posts.length; i++ ){
            response.write("<h3>" + posts[i].title + "</h3>");
            response.write("<p>" + posts[i].content + "</p>");
        }
    }

    response.end();
});

The request object provides us with a property named url. The url property tells us what page the visitor is trying to access.In our code above, we log the URL to our console so we can see what URL the visitor is trying to access. Ignoring the rest of the code, try running the application and look at your command prompt. You can see all the URLs you’re trying to access.

Now that we have this info, we can use it to determine what page to display to our users. By default, we would like to display the blog posts. In normal web applications, you would display a 404 message to your visitors if the page doesn’t exist. Since this is just a simple web app, we won’t worry about that stuff until later on in this series.

We check to see if the requested URL is the create page Otherwise, we display our blog posts. That’s it!

Mini Exercise

Try creating a route for a page called /latest that will display the latest blog post inserted. This would be the last index in the array. Then, add a link in our main page to the latest page.  Take a look at the spoiler code below to compare your code.

var http    =   require( "http" );

var posts   =   [
    {
        "title": "My First Blog Post!",
        "content": "WELCOME!"
    },
    {
        "title": "Node.js is awesome!",
        "content": "It really is!"
    }
];

var server  =   http.createServer(function( request, response){
    console.log( request.url );
    if(request.url  == "/create" ){
        // Create Blog Post Page Here!
    }else if( request.url == "/latest" ){
        response.write( "<a href='/'>Home</a>");
        response.write("<h3>" + posts[posts.length - 1].title + "</h3>");
        response.write("<p>" + posts[posts.length - 1].content + "</p>");
    }else{
        response.write( "<h1>Welcome to my blog!</h1>");
        response.write( "<a href='/create'>Create a new Post!</a> ");
        response.write( "<a href='/latest'>Latest Post!</a>");
        for( var i = 0; i < posts.length; i++ ){
            response.write("<h3>" + posts[i].title + "</h3>");
            response.write("<p>" + posts[i].content + "</p>");
        }
    }

    response.end();
});

server.listen( 8080 );

Conclusion

We learned how to create routes to display different pages according to the URL. Traditionally, you would just upload an html or PHP file and then that would be the URL for page. However, in Node.js, you can have cleaner URLs by using routes. In the next tutorial, we’ll create the page for creating blog posts. We’ll learn how to deal with POST requests and insert a new blog post into our web application.

Click here to learn more the request object!