techLab - 3rd Lesson

Welcome Back!

In this lesson, we are gonna introduce Node.js.

Node.js is a JavaScript runtime built on Chrome's V8 Javascript Engine.

In English, this means that it allows us to input something and output something in return.

Generally speaking, we are gonna be using it to set up our first backend.

What's a Back End?

The website that we created in the second lesson represents the presentation layer, meaning whatever the user sees.

Now, whenever we are gonna access data to be displayed in our website, we will need to set up a data access layer. That's our backend.

Installation:

  1. Click Here and download the version that fits the best with your OS.
  2. Install. ;)
  3. Create a .js file that says: 
    console.log("Hello Node World!");
  4. Go to your terminal and type to run: 
    node MYFILE.js

Alright, we installed Node. Now, let's see what we can do with it.

The one below is a good example of a server. Let's take a look at the code.

The first line, requests the module http from a package manager called npm (a.k.a. Node Package Manager)

We request modules to allow Node to do more and more things. This, for example, allows us to initialize a server.

var http = require('http');

The following code is a little more specific.

  http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}).listen(8080);

Let's analyze it in small blocks.

  http.createServer(function (req, res) {})

In here, using the var assigned to the module http that we created above, we are asking Node to create a server.

Whenever we create a server, we need a request and a response. We will analyze this concept further in the next lesson.

Think of this as a normal function. We are inputting something (a request) to get something in return (a response).

This line below defines the header of the response. No matter what input we use, our response has to carry many things with it. 

res.writeHead(200, {'Content-Type': 'text/plain'});

This line then, defines the end of the response. A response HAS TO have an end. 

res.end('Hello World!');

Last but not least, with the method listen, we are asking node to make that server available for us at port 8080.

http.createServer(function (req, res) {
  //our code
}).listen(8080)

The user does not see anything in our backend. We can prove this by using a 

console.log("Stuff");
and noticing that it does not appear in the console of our webpage, but only in the console of the environment we are developing in.

Well, we are not done.

Let's try to setup our first website locally using the server that we just created.

To do so, we are gonna be using a method of res, which is:

res.write("data.html");

Let's start.

  1. Download your website locally and put it in the folder where you created the server (or in the repl.it library.)
  2. Go to your server's folder.
    • Right after the var http, write: 
      var fs = require('fs');
      This allows us to use a file stream to have access to our html file.
    • now, enclose the whole response in a function called fs.readFile, which will be written as a response of our server. 
      fs.readFile('index.html', function(err, data) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(data);
            res.end();
          });
      • Done. Let's look at the code with a more specific approach.

The first line, as mentioned above, will call a method that accesses our file index.html and refers to it in the second parameter.

This function has two arguments, err and data.

err is different than null every time something doesn't work out in our function.

data is the reference of our file in the actual function.

The header of our response looks a bit different too. Rather than describing it as plain text, we are defining it as html text.

res.writeHead(200, {'Content-Type': 'text/html'});

Finally, the method res.write("something"); returns to the webpage whatever we pass in between the parenthesis (in this case, our HTML file, referred to as data!)

res.write(data);

Of course, we still have to end the request. 

res.end();

If you are developing on your own laptop, run the code and go Here. It should work!

Here's a working example.

This is a good time to start developing your own code, so try not to copy mine.

All done. Did it hurt?

This is what we learnt, so far, today.

Take Away Project 🌮🌮

Display an alert (IN YOUR SERVER!) that will write Hello, my name is YOURNAME and today is TODAYSDATE.

This has to happen every time you reload the webpage. you should have a var name and another var todayIs to deal with the two objects.