How to create my first app in NodeJs?

NodeJs is a server-side, asynchronous and event driven programming language mainly used to create real-time applications like chat system in which we need to perform tasks without refreshing page as well as communicate with the database. It’s an open source, cross-platform runtime environment for server side. It doesn’t require any regular web server like Apache for execution like other server-side scripting languages.

To get start with nodeJs you must have an intermediate understanding of javascript, ajax and any server-side scripting language like php. Before putting hands in nodeJs You must know the difference between the way of handling processes in other traditional programming languages and nodeJs. Whereas in traditional languages each connection spawns a new thread, nodeJs operates on a single thread, using non-blocking I/O calls, allowing it to support thousands of connections simultaneously.

While discussing nodeJs one thing more that should not be omitted is built in support for package management using NPM tool that comes by default with every nodeJs installation.

 

Ok now let's start putting hands in code. We will create a basic website using nodeJs and express 4 (is a web development framework for nodeJs).  First of all we have to install node. We are going to use windows platform.

Note: Before installing nodeJs you have to install python 2.6 or 2.7 which is required.

  1. Download nodeJs setup from http://nodejs.org/download/. We are going to choose windows installer 32 bit according to our system.

  2. Now run that setup by double clicking on that and follow the steps. After this node has been installed successfully you can check it by writing following command on CLI.

                   node --version

           It will show the node version installed.

  1. Create project folder at any place on your system. We have created   ‘D:/nodeApp’

  2. Open command prompt, go to the project folder and run the following command:

                    npm init

           It will create package.json file in the empty directory which will hold detail of all modules used.

    5.   Now run ‘npm install -g express-generator’

          Above command will install express-generator globally that will help to generate express framework application structure.

    6.  Go one step up to project folder by running ‘cd ..’ command and run ‘express project_folder_name’ (e.g. express nodeApp)

          This command will generate application structure using an express framework.

   7. Now go to project folder and run ‘npm Install’

   8. Run ‘npm install express --save’

     --save will write its dependency in package.json file as well and it mandatory too for a good programming practice in nodeJs as whenever you need to install same application on another system you need to run only ‘npm install’ command to get all dependencies related to that particular application and at that time system will read the package.json file in the folder.

   9. Go to your project folder and run node by writing following command:

      node .\bin\www

  You will get jade as a default engine. But we will use ejs as template engine as it is simple as compared to jade for beginning and very popular nowadays.

  Now our basic installation has completed. Let's move to next step of creating a very basic web application having two pages (home, about us) using ejs template engine.
 

  10.  Run ‘npm install ejs --save’ to install ejs template engine

  11. Open app.js on project root and find the following line

       app.set('view engine', 'jade');    

      Replace above line with following:

       app.set('view engine', 'ejs');

  12.  Now create ‘pages’ and ‘partials’ folders in views folder on the project root.

  13. First of all create partials like header.ejs, head.ejs and footer.ejs in views/partials which we will use on every page almost. Paste the following code on corresponding files.

header.ejs

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">

            <span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>

            EJS with Express 4

        </a>

    </div>

    <ul class="nav navbar-nav">

        <li><a href="/">Home</a></li>

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

    </ul>

</div>

</nav>

head.ejs

<meta charset="UTF-8">

<title><%= title %></title>

<!-- CSS (load bootstrap from a CDN) -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>

      body { padding-top:50px; }

</style>

footer.ejs

<p class="text-center text-muted">© Copyright 2014 w3web.in</p>

14. Now create index.ejs in views/pages and paste the following code:

<!DOCTYPE html>

<html lang="en">

<head>

    <% include ../partials/head %>

</head>

<body class="container">

    <header>

        <% include ../partials/header %>

    </header>

    <main>

        <div class="jumbotron">

             <div class="jumbotron">

                <h1>This is great</h1>

                <p>Welcome to templating using EJS</p>

            </div>

        </div>

    </main>

    <footer>

        <% include ../partials/footer %>

    </footer>

</body>

</html>
 

15. Create about.ejs in views/pages and paste the following code:

<!DOCTYPE html>

<html lang="en">

<head>

<% include ../partials/head %>

</head>

<body class="container">

<header>

    <% include ../partials/header %>

</header>

<main>

    <div class="row">

        <div class="col-sm-8">

            <div class="jumbotron">

                <h1>This is great</h1>

                <p>Welcome to templating using EJS</p>

            </div>     

        </div>

        <div class="col-sm-4">       

            <div class="well">

                <h3>Look I'm A Sidebar!</h3>

            </div>

        </div>

    </div>

</main>

<footer>

    <% include ../partials/footer %>

</footer> 

</body>

</html>

16. Open routes/index.js file and paste the following code in it:

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

 res.render('pages/index', { title: 'Home' });

});

/* GET about page */

router.get('/about', function(req, res, next) {

res.render('pages/about', {title:'About Us'});

});
 

module.exports = router;

17. Run node and see the output by browsing through ‘localhost:3000’ URL on your system. You will see a web application having two pages.
 

So it was the basic intro of nodeJs. Thank you.

Continue for part 2 - http://www.tundriyal.com/how-create-basic-application-nodejs-using-express-4-framework