How To Start With Node.js

Let’s start with the question, "What is NodeJS?"

Well, simply, Node.js is a server framework which runs on various platforms like Windows, Linux, Unix, Mac OS X. It is open source.

According to NodeJS website, "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world."

So, what is V8?

NodeJS

According to Google Developers

V8 is Google’s open source high-performance JavaScript engine, written in C++ and used in Google Chrome, the open source browser from Google, and in Node.js, among others. It implements ECMAScript as specified in ECMA-262, and runs on Windows 7 or later, macOS 10.5+, and Linux systems that use IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.

More information can be found on V8's public wiki.

How to start

We need to install & setup NodeJS development environment to work with. Go to NodeJS page to download the MSI file.

NodeJS

Click "Next" to complete the setup. As we planned to develop a sample application using Visual Studio, please make sure that the IDE has NodeJS development package installed.

NodeJS with Visual Studio

Open Visual Studio 2017. Go to File > New > Project

NodeJS

A New Project window will appear; from the left menu, click JavaScript. It will show a list of sample NodeJS applications. I just started with a Blank NodeJS Web Application.

NodeJS

The initial sample has server.js and package.json file.

Node.js Web Server

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello World\n');
}).listen(port);

In the above code snippet, we can see that the initial sample app has a core module (HTTP) which has "http.createServer" method to handle the request from user on port 1337 with response.

Package.json

{
"name": "startup-nodejs",
"version": "0.0.0",
"description": "StartupNodejs",
"main": "server.js",
"author": {
"name": "Shashangka"
}
}

Now, run the application. The server will respond with the below output in the browser.

NodeJS

Now, if we want to serve HTML pages with touting in terms of the user request, we need to go for different NodeJS Frameworks. In this post, we are using Express.js to develop sample web application which can serve HTML page.

Node.js Frameworks

Express.js, Geddy, Locomotive, Koa, Total.js, Hapi.js and more.

Express.js Web Application

To create Express.js web application. First of all, we need to install Express.js package.

Install express.js using npm

$ npm install express --save

Install Express.js in Visual Studio

Package.json

{
"name": "nodejs-web-app1",
"version": "0.0.0",
"description": "NodejsWebApp1",
"main": "server.js",
"author": {
"name": "Shashangka"
},
"dependencies": {
"express": "^4.16.2"
}
}

As we can see, our package.json has a dependency now with package version. Now, we need to modify our server.js file to serve HTML page.

Index.html

Create an HTML page to response with the user request.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3>Hello NodeJS</h3>
</body>
</html>

Server.js

In the below code snippet, Express.js module is imported by using require() function.

'use strict';
//var http = require('http');
var express = require('express');
var app = express();
var port = process.env.PORT || 1337;
//http.createServer(function (req, res) {
// res.writeHead(200, { 'Content-Type': 'text/plain' });
// res.end('Hello World\n');
//}).listen(port);
app.get('/', function (req, res) {
res.sendFile('index.html', { "root": __dirname });
});
var server = app.listen(port, function () {
console.log('Node server is running on port..' + port);
});

The app object responsible for routing user requests(HTTP), rendering HTML views. The app.listen() function creates the Node web server by listening defined port.

Output

Now, run the application and it will show the below output.

NodeJS

Now, let’s add another page called About. We also need to modify our existing server.js file & add the below code snippet.

app.get('/about', function (req, res) {
res.sendFile('about.html', { "root": __dirname });
});

Add a menu to index & About page.

<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>

Finally, run the application. As we can see from the below image, the request is executed by responding to the About page.

NodeJS

9 Comments

Join the conversation! Your thoughts help the community grow.

Sagar Shinde7y ago
Nice article. Thanks for sharing...
Zahid Hasan8y ago
Good Job. . ..
imran osmanzai8y ago
This is very integrating for my dear sir thank you
Muhammad Aqib Shehzad8y ago
Good article of node.js introduction
naveen kumar8y ago
Nice Article............
Sanwar Ranwa8y ago
Really helpfull....
Hiten Pandya8y ago
Good Share...................
Sagar Pandurang Kap8y ago
Nice article..........
Naresh Singhal8y ago
Good did !!.......