Tag Archives: Server

MEAN web development #2: Node.js in the back

A series on MEAN and the first actual article in which we’ll get some web pages served starts with the N, the very last letter of MEAN! Yes, it’s true, we’re starting in the back, literally and figuratively speaking. Node.js will be your server side software and you’ll use it to handle incoming HTTP requests. Once we’ve got this going we’ll be able to get to the other letters of MEAN (MongoDB, Express and AngularJS in case you forgot). And in fact we’ll already be looking at some of that E, for Express, in this post!

For a change I won’t mention you should follow me on Twitter because that’s where I tweet on anything software, MEAN and Node.js related and I won’t mention my Twitter handle is @sanderrossel either.
So now that I haven’t mentioned that I am going to mention my GitHub account because that’s where you’ll find the source code for this blog post. You can find the repository for this post in the SanderRossel/mean2-blog repository.

By the way, if you’re just dropping in and you haven’t read the first post in this series yet you really should.

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

Getting started

Maybe the title of this post seems familiar? I’ve written on a back-end technology before, Web development #4: PHP in the back. In that blog post I explain how to write PHP and how to get it working on your own machine by installing some web server software, XAMPP. Here’s the cool thing about Node.js. It is a web server already, so you don’t need to install anything besides Node.js (which we did in the first part of this series). You can just write JavaScript and run your server!

So let’s look at the “Hello world” example from the first article again.

var http = require('http');
var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello, Node.js!');
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

I’ve written it a bit different from my first post, so we can see what’s going on just a little bit better. There are a few things going on there. First of all is the ‘require‘ bit. With require we can load a module which we can use to implement certain functionality. So what’s a module? Node.js has a pretty cool module system, where a module can be compared to classes like we have in C# or Java. We’ll look at modules in more detail in a next post. So anyway, with the first line of code we’re telling Node.js that we need the http module and we store it in the http variable.

So now that we have this http module, or class-like thing, we can invoke functions on it. And the first (and only) function we’re going to call is createServer. So createServer takes an (optional) callback function as parameter. The callback function takes a request and a response as input parameters which we can use to see what the user requested and to return anything back to the client.
As you can see we’re writing to the header of the response, using writeHead, to tell it that everything was handled correctly (HTTP code 200 is OK) and that we’re sending back some plain text. By calling response.end we’re telling Node.js we’re done and that the result is ready. Response.end must be called on each request (or our client will be waiting on a response forever) and it must be called as the final operation on our response object, since it signals that the response is complete (all headers and content have been written to the response). In this case we’re passing our response text directly to the end function, but alternatively we could use the write function and simply call end without parameters. That would look as follows.

res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello, Node.js!');
res.end();

Or, if you want to build up some response text, you can do something as follows (using write n times).

res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello,');
res.write(' Node.js!');
res.end(' [This text is optional]');

And, of course, we’ll typically return HTML rather than plain text. Notice I’ve changed the header too.

res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<h1>Hello, Node.js!</h1><p>This is a paragraph...</p>');

So now that we’ve called the createServer function and we’ve specified what to return we have a Server object. This Server object has functionality to listen for incoming HTTP requests and handle them accordingly. To start listening simply call the listen function and pass it a port and an IP address. I’m still using 1337 and localhost from the Node.js website example.

Last, and actually also least, is the console.log, which just logs some debug info to your command window when starting your Node.js app.

You can run each example by opening up a command prompt and typing in (exluding double quotes (“”)) “node pathToMyFile\MyFile.js”. If your file path contains any spaces be sure to wrap it in double quotes.

Debugging

Did you try out all those examples? Did you have to restart the command prompt and type in “node pathToMyFile\MyFile.js” a couple of times? Tiresome, isn’t it? Luckily there are tools that automatically restart your Node.js app when changing a file. You really should install one and save yourself time and trouble! I’m going to use nodemon. You can install it using npm. Open up a command window and type “npm install nodemon -g”. The -g tells npm to install nodemon globally. That means nodemon isn’t some library that this one project uses, it’s a global library from which all your projects can benefit! Whoohoo, never again restart your Node.js app manually because you’ve made a minor file change! To make sure nodemon installed correctly open up a command prompt and type in “nodemon -v” and you should get the currently installed version of nodemon.
Now instead of starting your Node.js app using “node pathToMyFile\MyFile.js” use “nodemon pathToMyFile\MyFile.js” (simply replace node with nodemon). Now go ahead and edit your file. Watch the command prompt and see how your app is automatically restarted. Browse to your website (localhost:1337) and see that the Node.js app has indeed restarted.

For some more tips on debugging web apps in general (no matter if you’re using Node.js, C# ASP.NET, Java or what have you) you should read a previous blog post I wrote, which has a little section on debugging web pages from your browser, Web development #8: Where to go from here.

Doing a little more

So here’s a nice one for you.

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Requested: ' + req.method + ' - ' + req.url);

Try putting that in the createServer callback. Now browse to localhost:1337/SomePage or localhost:1337/AnotherPage?someParam=someValue. You should see whatever you put after localhost:1337 echoed in your browser window.

So let’s say we have some HTML pages that we want to show based on the requested page. This is now pretty easy. Here’s a first, and rather naive, implementation. In case you got my source from GitHub, the final implementation can be found in the file nope.js (that kind of gives away the ending, doesn’t it?).

var http = require('http');
var fs = require('fs');

var server = http.createServer(function (req, res) {
    switch (req.url) {
        case '/about.html':
            res.writeHead(200, {'Content-Type': 'text/html'});
            var buffer = fs.readFileSync(__dirname + '\\about.html');
            res.end(buffer.toString());
            break;
        case '/index.html':
        case '/':
            res.writeHead(200, {'Content-Type': 'text/html'});
            var buffer = fs.readFileSync(__dirname + '\\index.html');
            res.end(buffer.toString());
            break;
        default:
            res.writeHead(404, {'Content-Type': 'text/html'});
            res.end('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>');
            break;
    }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

So there’s some new stuff in there. First we require(‘fs’), which gives us some control over the file system (fs is short for File System). After that we do a switch statement on the request url. We support no url (just localhost/1337, we’ll get url “/”), /index.html and about.html. Everything else will get a 404, page not found. Note that no url and index.html both give you the index.html page. So make sure you have an index.html and an about.html page in the same folder as your Node.js app. If you got this from my GitHub account you’ll be fine, otherwise you’ll need to create those files and put some HTML in them.
So if you browse to localhost:1337/index.html or about.html we’ll first set the header to 200 and text/html. After that we’ll use the fs object to read either the index.html or the about.html file.
Notice that I’m using readFileSync. Remember that I explained, in my first post in the series, that Node.js runs a single thread to handle all incoming requests? Because any synchronous action (meaning it just runs on the same thread) is blocking that one thread everything in Node.js is asynchronous by default. So any non-asynchronous (synchronous) method is suffixed with ‘Sync’. If, like me, you’re coming from C# that’s just the other way around from what you’re used to!
So anyway, we read the file and we now get some buffer object. To get the actual contents as a string simply call the toString function on the buffer.
We also see the __dirName variable, which is a global Node.js variable which contains the directory in which your Node.js JavaScript file resides.

There is an overload for the readFileSync that will return the string value instead of the Buffer object.

var content = fs.readFileSync(__dirname + '\\index.html', 'utf8');
res.end(content);

So there are a few problems with this code. First of all we are reading files synchronously. Suppose this takes 50 milliseconds. No big deal you’d say, but suppose you have 100 requests per second, that’s 5000 milliseconds, or 5 seconds, for the 100th visitor! Imagine that every 100th visitor had to wait 5 seconds, at least, for your page to load. That’s rather disastrous for a web page! So we really want to read that file asynchronous. Luckily that’s pretty easy. We can use the readFile function which takes a callback function as last parameter. The callback function gets an error object and the returned data as input parameters. So how would that look?

fs.readFile(__dirname + '\\index.html', 'utf8',
    function (err, data) {
        if (err) {
            // Handle exception...
        } else {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.end(data);
        }
});

Second, we’d best put the file handling in a seperate function. We now have this ‘huge’ piece of duplicated code! So let’s tidy it up a bit.

var http = require('http');
var fs = require('fs');

var readHtml = function (fileName, res) {
    fs.readFile(__dirname + '\\' + fileName, 'utf8',
        function (err, data) {
            if (err) {
                // Handle exception...
            } else {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.end(data);
            }
    });
};

var server = http.createServer(function (req, res) {
    switch (req.url) {
        case '/about.html':
            readHtml('about.html', res);
            break;
        case '/index.html':
        case '/':
            readHtml('index.html', res);
            break;
        default:
            res.writeHead(404, {'Content-Type': 'text/html'});
            res.end('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>');
            break;
    }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

So, all fixed, right? Well, actually, this looks more like Nope.js! Well alright, I suppose it’s not that bad, but once your app starts to get bigger this approach might get a little messy. Let’s add some Express and see how it can help make things easier.

Just a little remark on the 404 HTML. Of course it would be better to create another HTML file for the 404 page, but I just wanted to show you that you can use multiple methods of returning HTML even if you’ve already used another method.

Adding some Express

In the first part of this series we’ve installed Express in our project, so I’m assuming you’ve got it set up. As said Express just makes working with Node.js a lot easier. It handles routing, rendering of HTML, sessions, template engines and all that stuff. So let’s rewrite the above code so it uses Express.

var express = require('express');
var app = express();

var options = {
    root: __dirname
}

app.get(['/', '/index.html'], function (req, res) {
    res.sendFile('index.html', options);
});
app.get('/about.html', function (req, res) {
    res.sendFile('about.html', options);
});
app.get('*', function (req, res) {
    res.send('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>'); 
});

var server = app.listen(1337, '127.0.0.1');

First we’re requiring Express. This actually doesn’t return an object, but a function, also called the express function, and as you can see on the second line we just run the function and store the result in our app variable. This app variable now denotes our Express application. After that we use the app.get function multiple times to handle our routing. I think it’s pretty straightforward. If “/” or “/index” are requested we return the index.html file, if “/about” is requested we return the about.html file and if anything else is requested we send back the 404 HTML.
It’s worth mentioning that the send and sendFile functions set the header of the response object. sendFile sets the header based on the file extension (in these cases .html) and you can override it in the options object. We only use the options object to set the root of the files though, in our case that’s the same folder as our app resides in, but for bigger projects it would be wise to create a /views folder or something like that.
Finally we call app.listen and pass in our port and IP address. Notice I’ve used the same port and IP as the nope.js example, so you can’t run them both simultaneously.

Here’s another thing Express handles pretty well. Parameters and queries. Using the request object we can ask for any parameter or query that the user sent our way. Here a little example.

app.get('/echo.html', function (req, res) {
    res.send('<h1>Echo</h1><p>This is an echo... ' + req.query.say + '</p>');
});

Using the query object we can get the value of any query parameter. In this case we expect a parameter called “say” and its value will be echoed to your browser. So just browse to localhost:1337/echo.html?say=someValue.
Pretty neat, right?

There are some other best practices, like putting your routing in a separate file and exception handling, that we haven’t discussed yet. No problem, since we’ve only scratched the surface anyway. Don’t worry, we’ll go in a little deeper yet in my next post!

And as always I’d like to give you some reading recommendations. Syncfusion has an awesome free ebook on Node.js, Node.js Succinctly. Just sign up and get them free Succinctly books! They have lots more, like JavaScript Succinctly and HTTP Succinctly, which might come in handy when working with Node.js.
And it also just so happens that Manning Publications has quite a few books on the MEAN stack as well! They’re not free, but when you really want to do some Node.js heavy lifting I can really recommend getting one of them. So they’re Node.js in Action, Node.js in Practice and Express.js in Action.
And, of course, you could also just keep following my blog, which is free and a lot less to read.

Stay tuned!

Web development #4: PHP in the back

Missed me? It’s been a while since I last blogged (about three months). I’ve been busy moving to my own house and getting up-to-speed at a new job. Lots of good stuff, but no blogging. Well today is the day I’m picking this up again and I’m just going to act like it’s three months ago and continue with the series.

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

So in the previous installments we’ve created a web page using HTML and CSS. We can actually build pretty nice websites using just those, but we still run into some trouble. What if we wanted to add content to our site? We’d have to edit our HTML each time. What if we wanted to display our website in multiple languages? What if we wanted users to be able to add content to the site (such as a blog)? In other words, we want our content to be dynamic. That’s all not possible using just HTML and CSS. We’re going to need a bit more. We’re going to need something creating our HTML on the back-end.

For this blog post I assume you are familiar with HTML and CSS, which you can read about in my previous blog posts, and that you’ve worked with some programming language before, preferably some C-based language such as C# or Java.

Introduction to PHP

So our back-end is just a server listening for requests. Whenever a request comes in we want to handle it and send a response (such as an HTML web page). We can handle these requests with a variety of tools and languages, but for this article I’m using PHP.

Why PHP? First of all it’s free. Second, it’s one of the most popular web languages that has been around for a good long while. It has a huge community and lots of documentation and tutorials. Third, virtually all web hosts, even the free ones, have support for PHP. Other languages, such as C#, are not always supported. Last, but not least, PHP is quite easy to learn because it can be pretty lightweight. Actually I’m simply going to write my PHP in Notepad++.

So PHP was created twenty years ago, in 1995, by Rasmus Lerdorf. Back then the PHP stood for Personal Home Page. They changed it to PHP: Hypertext Preprocessor, making it a recursive acronym (because the first P stands for PHP, of which the first P stands for PHP, of which the first P…). Clever, huh? Anyway, PHP is a scripting language, meaning it is interpreted rather than compiled. It’s also procedural, object oriented, weakly typed and it has C-based syntax. Enough talking, let’s code!

Setting up your environment

Unfortunately we can’t code just yet. Remember that your browser renders HTML and CSS. It can also run JavaScript (which I will discuss in another blog post), but it can’t execute PHP files. Usually your server handles PHP execution. Chances are you don’t have a web server laying around. Luckily you can configure your own PC to act as a web server.

To do this simply install web server software. You have a few choices, but I’m going for XAMPP. You can download XAMPP here and then simply install it (choose all default options, or change them if you know what you’re doing). When the installation is done XAMPP will ask you to start the XAMPP Control Panel. Start it and you’ll see a list of options. We’ll need Apache, so just start it. Now start your favourite browser and navigate to http://localhost. You should see a XAMPP page. Congratulations, you have just installed a (local) web server and you can now run PHP files!

To check if it really works create a new text file and name it “hello.php”. Inside the file place the following text:

<?php
    echo "Hello, PHP!";
?>

Now go to the installation folder of XAMPP (you can go there quickly by using the ‘Explorer’ button in the XAMPP Control Panel), find the htdocs folder and place your hello.php file there. Now, in your browser, navigate to http://localhost/hello.php. You should see the text “Hello, PHP!” And now that we’ve got the mandatory Hello world example out of the way let’s start writing some real PHP.

Learning the syntax

So let’s first look at some basic PHP syntax. Basically you’re going to write an HTML page with some PHP in it. The PHP is going to create some text representing more HTML. To indicate that you’re going to use PHP use the <?php open tag and to indicate that you’re done with PHP use the ?> closing tag. You’ve seen this in the example earlier.

The echo, or alternatively the print, statement outputs your code to HTML. In the above example it creates the HTML “Hello, PHP!”, which is just some text. But we could make that echo “<h1>Hello, PHP!</h1>” and we would get a header on our page.

So as I mentioned PHP is weakly, or loosely, typed. That doesn’t mean PHP doesn’t have types, it means a variable can change its type while the code executes. It also means you can add 3 to “3” and the result might be 6 or “33”, so a bit of caution is required when working with weakly typed languages (and in fact PHP always converts text to numeric when adding).
So what are the types in PHP? First we have the int for numerics without fractional components (so 1, 8, 42 and 986 are valid integers, 1.12 is not). Second there is float, or double, for numerics with fractional components. Then we’ve got the boolean or bool for a simple true or false. Next is the string for text (or an array of characters). Then we’ve got the array, or a 0-based indexed collection of stuff. There’s the object type, which encapsulates state and behaviour. And last, and actually pretty literal least, there’s NULL indicating the absence of any value.
Nothing special if you’ve worked with other languages before.

So how do we go about and use these types? Usually we’d want to store them in variables. So how do we declare variables? We actually don’t… Just assign a value to some variable and all of a sudden it’ll be there. It’s a kind of magic! And a variable always start with the $ sign. The typical variable declaration then looks like this:

$intVar = 42;
$floatVar = 3.142;
$boolVar = true;
$stringVar = "Some string"; // Double quotes.
$stringVarAltern = 'Alternative string'; // Single quotes.
$arrayVar = array('Pulp Fiction', 'Fight Club', 'Star Wars');

class person
{
    public $name = NULL;
    public $age = NULL;
}

$objectVar = new person();
$objectVar->name = 'Sander';
$objectVar->age = 27;

$nullVar = NULL;

Now aside from the class and objectVar that looks pretty straightforward right? But beware, the following is completely legal (PHP is weakly typed, remember?):

$stringVar = 'Some string';
$stringVar = 42;

Now that’s something you do want to look out for.
There’s something else about strings too. See how you can declare a string using single or double quotes? Well, the double quote strings are interpreted strings, meaning that any variable name you place in there will be evaluated before the string prints. If you ever need to concatenate string you can use the . operator.

$hello = 'Hello';
echo '$hello world!'; // Outputs $hello world!
echo "$hello world!"; // Outputs Hello world!
echo "$helloish world!"; // Error, $helloish is undefined!
echo "{$hello}ish world!"; // Outputs Helloish world!
echo 'Conc' . 'aten' . 'ate!'; // Outputs Concatenate!

Another thing that might surprise you is that PHP can treat anything as a boolean! Any non-default value will be true while all default values will be false, also called truthy and falsey. The next example uses an if/else statement to illustrate this. Try playing around with it.

if ("Hello") // Try 0, '', '0', 0.1, NULL and array().
{
    echo "Yep...";
}
else
{
    echo "Nope!";
}

So I’ve also shown you an if/else statement. Let’s look at some loops too.

$movies = array('Pulp Fiction', 'Fight Club', 'Star Wars');

for ($i = 0; $i < count($movies); $i++)
{
    echo "$movies[$i] <br>";
}

foreach ($movies as $movie)
{
    echo "$movie <br>";
}

Now there’s actually quite something going on there! First we initialize an array, which we’ve seen before. Now in the first for loop we start by declaring our counter variable $i, then we do a boolean test to check if we need to loop once more and finally we do an update (increment $i) after each iteration. In the boolean check we also use the count(array) function to check if we still have more elements in the array. Ideally you would perform this count outside of the statement so it only gets performed once.
The second loop is a bit more readable. I’m basically saying “for each element, which I will call $movie, in the array $movies do this…”. Now in the loop’s body you can freely use the current element using the $movie variable.
There are also do– and while loops, but I won’t discuss them here. For a programmer this shouldn’t be anything new!

Writing a page

Now let’s write an entire page. Usually you’d have a database, such as MySQL, running, but that’s a bit overkill for this post. So we’re going to read lines of text from a text file and show them on the page. You’ll see that you can update your page without actually modifying your HTML or PHP file.

So let’s first take the example with my favourite movies. We’re going to put our favourite movies in a text file and print them on our page. So create a new PHP file, call it movies.php and put it in the hpdocs folder (which is in your XAMPP folder). Now create a text file called movies.txt and put it in your htdocs folder with your PHP file. You can put some movie names in your text file. Each name goes on a seperate line (I’m calling it movies, but any value would suffice, of course).

For this example I’m going to use an unordered list. I haven’t shown this yet, but the HTML is as follows:

<ul> <!-- Unordered List -->
    <li>Some item</li> <!-- List item -->
    <li>Another item</li>
    <li>Third item</li>
    <li>etc...</li>
</ul>

You could also use an ordered list, in which case you’d use <ol> tags instead of <ul> tags.

So your PHP file could look like this (excluding the !DOCTYPE, html, header and body tags):

<h1>My favourite movies!</h1>
<p>
    <?php
        if (file_exists('movies.txt'))
        {
            echo '<ul>';
            $lines = file('movies.txt');
            foreach ($lines as $line)
            {
                echo "<li>$line</li>";
            }
            echo '</ul>';
        }
        else
        {
            echo 'No favourite movies found!';
        }
    ?>
</p>

So using the PHP function file_exists(string) we’re first checking if the movies.txt file exists at all. If it doesn’t we’ll simply show “No favourite movies found!”, but if it does we’re going to create an unordered list and read the files contents using the file(string) function. The file(string) function reads all lines of a file and puts them in an array. There’s more functions for file manipulation, but I won’t discuss them here. Next we’re looping through the lines we just got from the file. For each line we’re appending a list item element to our HTML. When all the lines are processed we close our unordered list.
And that’s our page! You can view it by navigating to http://localhost/movies.php. You can use some CSS to make it look a bit prettier and you’ll probably want to add some content too.

Now imagine you’d get that out of a database? Pretty neat, huh!

Functions

Now there are times when you have certain code that you want to reuse. Let’s say we want to create another unordered list based on another file. The same rules apply, except maybe we don’t have movies, but songs that we’d like to display. We can create function for this and have the filename passed in as a parameter. So let’s look at how we can put the code above in a function. At the top of your page put the following:

<?php
    function fileAsUnorderedList($fileName, $notFoundMessage)
    {
        if (file_exists($fileName))
        {
            echo "<ul>";
            $lines = file($fileName);
            foreach ($lines as $line)
            {
                 echo "<li>$line</li>";
            }
            echo "</ul>";
        }
        else
        {
            echo $notFoundMessage;
        }
    }
?>

As you can see we’ve defined a function that does the same as our previous code, except the filename and the message when the file is not found are passed in as parameters. Now how can we call this?

<h1>My favourite movies!</h1>
<p>
    <?php
        fileAsUnorderedList('movies.txt', 'No favourite movies found!');
    ?>
</p>
<h1>My favourite music!</h1>
<p>
    <?php
        fileAsUnorderedList('music.txt', 'No favourite music found!');
    ?>
</p>

And look at that! You can now add a second text file to your htdocs folder and your favourite music will be displayed the same as your movies. You still see almost identical code here, so we could change our function and make it do a bit more or we could create a second function that creates the header and paragraph for us.

And what if you wanted to use this function on other pages? Simply put the function in a seperate file and include the following line of code in the PHP file where you want to use the function.

<?php include("MyFunctions.php"); ?>

If you want to further organize your code, and you’ll want that, you’ll have to use objects and namespaces. You’ve already seen a little example of an object earlier and I’m leaving it at that. Be careful with putting functions directly in your files though. What if two files you want to include contain the same functions (or variables)!? You’d have a problem. Using objects and namespaces help toward preventing this.

So that was a very short introduction to PHP. Probably shorter than it deserves. PHP has lots of functions, libraries, third party tooling and a large and active community. If you want to learn more about PHP I suggest you start by Googling for tutorials or perhaps read a book about it. For now you’ve created your first website with dynamic content using a server-side language though! In my next post (which won’t take me another three months) we’ll look at sending data from our website to the server so we can use our page to add movies or music to the text files.

Stay tuned!