Introduction to Node.js

#node #beginners

In this simple introduction to Node.js, we will build a basic application controller which allows us to navigate between multiple routes, and render the appropriate HTML. This means that we will only be covering GET requests for the moment.

Let's start by creating a basic file structure for our application.

controllers
    app_controller.js
views
    about.html
    index.html
app.js

Now we should create our views. Place the following markup in index.html.

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <h1>Index</h1>
        <a href="/about">About</a>
    </body>
</html>

Next, place the following markup in about.html.

<!DOCTYPE html>
<html>
    <head>
        <title>About</title>
    </head>
    <body>
        <h1>About</h1>
        <a href="/">Index</a>
    </body>
</html>

Feel free to expand on these views. Just be sure that you have two distinct templates.

With our views complete, let's build our application controller. Place the following code in app_controller.js.

const fs = require("fs");

const appController = (request, response) => {
    if (request.url === '/') {
        fs.readFile("./views/index.html", (error, html) => {
            if (error) throw error;
            response.write(html);
            return response.end();
        });
    }
    if (request.url === "/about") {
        fs.readFile("./views/about.html", (error, html) => {
            if (error) throw error;
            response.write(html);
            return response.end();
        });
    }
}

module.exports = appController;

This code obviously doesn't follow the DRY principle, but that's okay for now. I should point out that there are surely much better practices, but the point here is to gain a basic understanding.

If you haven't guessed already, when we make a request to our server, the requested route will be stored in the url property of the first parameter of our appController function. Knowing this, we can implement separate logic for each requested route. In this example we are simply going to render index.html when the requested route is equal to '/', and about.html when the requested route is equal to "/about". We render the appropriate template by using fs.readFile to get the contents, and response.write to render the results. Finally we return response.end to notify our server that an update is required.

Before we can see any results, we need to do one more thing. Let's create a server within app.js and pass our appController to it.

Place the following code in app.js.

const http = require("http");
const controller = require("./controllers/app_controller");
http.createServer(controller).listen(3000);

Enter the following command in your terminal.

node app.js

Now visit localhost:3000 in your browser.

We did it! Note that you are able to navigate between the two routes, and that the appropriate template is rendered.

I hope that some of you were able to find this introduction helpful. I may decide to cover handling POST requests in the near future, although there really isn't much more to it.