Looking to build your website with NodeJS, but you’re not sure where to begin? Not to worry. We’ll take you through the basics of coding a website and using this interactive application. If you’re just starting out in the tech freelance industry, all of this may be a little daunting. Be sure to ask yourself what areas of tech do you get excited about and how can you build your portfolio in that specific area?

First, what is NodeJS?

Node.js is an open source, a cross-platform runtime environment for developing server-side and networking applications. Node.js applications are written in JavaScript and they provide a rich library of JavaScript modules which help simplify the development of web applications.

Install Node.js

In order to build your website with Nodejs, the installation is very simple. The installers are available on https://nodejs.org/en/ depending on your OS.

Installed! Now what?

Once installed you’ll have access to a new command called “node.” Let’s create and put the code below into helloworld.js file:

$ cd your_app_location
$ npm install express

In the terminal, in the folder that contains the helloworld.js file, run:

$ node helloworld.js

Welcome to NodeJs

Asynchronous Callbacks

The typical pattern to build your website in Node.js is to use asynchronous callbacks. Basically, you’re telling it to do something and when it’s done, it will call your function (callback). This is because Node hosting is single threaded. While you’re waiting on the callback to fire, Node can go off and do other things instead of blocking and stalling until the request is finished.

Create Something Useful

Unfortunately, running plain JavaScript is not very useful. This is why Node.js also includes a powerful set of libraries (modules) for doing real things. One of the built-in modules makes it pretty easy to create a basic HTTP server, which is an example on the Node.js homepage. Create file app.js

var http = require('http');
http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    res.end('Hello World\n');
}).listen(8080);
console.log('Server is running. Please access your first website at http://localhost:8080');

This is not a full-featured HTTP server. It can’t serve any HTML file or images. In fact, no matter what you request, it will return to ‘Hello World.’ However, you can run this and hit http://localhost:8080 in your browser and you’ll see the text.

$ node app.js

Now, the server is running. Please access your first website at http://localhost:8080 After the basic sample above is completed, it is helpful to know how to respond to data depending on your user’s request. Let’s create server.js and index.html file and put in a code below server.js

var http = require('http');
var fs = require('fs');
var url = require('url');
http.createServer(function(req, res) {
    var pathname = url.parse(req.url).pathname;
    console.log("Request for " + pathname + " received.");
    var arrPath = pathname.split("/");
    fs.readFile(arrPath[1], function(err, data) {
        console.log(arrPath[1]);
        if (err) {
            console.log(err);
            res.writeHead(404, {
                'Content-Type': 'text/html'
            });
        } else {
            res.writeHead(200, {
                'Content-Type': 'text/html'
            });
            res.write(data.toString());
        }
        res.end();
    });
}).listen(8080);

index.html

Index page

  Lorem Ipsum is simply dummy text of the printing and typesetting industry.  

You will see nothing in http://localhost:8080. It must be here: http://localhost:8080/index.html

Notice:

Your Node.js application no longer exists. This is because you created a server and your Node.js application will continue to run and respond to requests until you kill it yourself.

Express

Express is a framework that makes creating and coding a website very simple. You can install this using the “npm” command. Most importantly, this tool gives you access to an enormous collection of modules created by the community with one of them being Express.

$ cd your_app_location
$ npm install express

When you install a module, it will put it in a node_modules folder inside your application directory. You can now use it like any built-in module. Now, let’s create a basic application using Express. app.js

var express = require('express');
var app = express();
app.get('/', function(req, res) {
    res.send('Hello World!');
});
app.listen(8080, function() {
    console.log('Example app listening on port 8080!');
});

Run the app by

$ node app.js

The app starts a server and listens on port 8080 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. For every other path, it will respond with a 404 Not Found. Now, let’s hit http://localhost:8080/ to see a result.

NPM – Node Package Manager

In the previous example, we manually installed Express. If you have a lot of dependencies, that’s not going to be a very good way to install them. That’s why npm makes use of a package.json file. Create a file package.json

{
    "name": "HelloWorld",
    "version": "0.0.1",
    "dependencies": {
        "express": "~4.13.1"
    }
}

A package.json file contains an overview of your application. There are a lot of available fields here and the dependencies section describes the name and version of the modules you’d like to install. In this case, we can accept Express 4.13.1 version. You can list as many dependencies as you want in this section. Now, instead of installing each dependency separately, we can run a single command and install all of them at once.

$ npm install

When you run this command, npm will look in the current folder for a package.json file. If it finds one, it will install every dependency listed. In conclusion, we hope this tutorial on how to build your website with NodeJS was useful and that it helps you progress even further into your freelance career! Feel free to comment below if you have any questions!