In this post we will learn about NodeJS. This is the startup post for those who are interested to work with NodeJS but confused about how to start.
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.
Now the question, What is V8?
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 .
How to Start:
We need to install & setup NodeJS development environment to work with. Go to NodeJS page to download the msi file.
Click Next to complete the setup. As we planned to develop sample application using Visual Studio so please make sure that the IDE has NodeJS development package installed.
NodeJS with Visual Studio: Open Visual Studio 2017. Go to File > New > Project
New Project window will appear, from left menu click JavaScript, it will show a list of sample NodeJS application. I just started with a Blank NodeJS Web Application.
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 the initial sample app has a core module(http) which has “http.createServer” method to handle 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 response with the below output in browser.
Now if we want to serve HTML pages with routing in terms of user request, we need to go for different NodeJS Frameorks. 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 .
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 a HTML page to response with user request.
Hello NodeJS
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, it will show the below output.
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.
Run the application, as we can see from below image the request is executed by responding to the about page.
Source Code: I’ve uploaded the full source code to download/clone , Hope this will help 🙂