Node JS - Node js Express FrameWork Material - Node - Node JS tutorial - webnode




Related nodejs article tags - node js - node js tutorial - node js examples

What is Express.js?

  • Express.js is a Node js web application server framework, which is specifically designed for building single-page, multi-page, and hybrid web applications. It has become the standard server framework for node.js. Express is the backend part of something known as the MEAN stack. The MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications which has the following components;
    • MongoDB - The standard NoSQL database
    • Express.js - The default web applications framework
    • Angular.js - The JavaScript MVC framework used for web applications
    • Node.js - Framework used for scalable server-side and networking applications.
    learn nodejs - node-js tutorial - nodejs express mongodb jade - nodejs examples -  nodejs programs
  • The Express.js framework makes it very easy to develop an application which can be used to handle multiple types of requests like the GET, PUT, and POST and DELETE requests.
 node-js express framework

Learn Node js - node js Tutorial - node-js express framework - node - Node js Examples

Installing and using Express:

  • Express gets installed via the Node Package manager.
  • This can be done by executing the following line in the command line

npm install express

  • The above command requests the Node package manager to download the required express modules and install them accordingly.
  • Let's use our newly installed Express framework and create a simple "Hello World" application.
  • Our application is going to create a simple server module which will listen on port no 3000. In our example, if a request is made through the browser on this port no, then server application will send a 'Hello' World' response to the client.
Related nodejs article tags - node js - node js tutorial - node js examples

Code :

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Explanation:

 installation in node.js express framework

Learn Node js - node js Tutorial - installation in node.js express framework - node - Node js Examples

  1. In our first line of code, we are using the require function to include the "express module."
  2. Before we can start using the express module, we need to make an object of the express module.
  3. Here we are creating a callback function. This function will be called whenever anybody browses to the root of our web application which is http://localhost:3000 . The callback function will be used to send the string 'Hello World' to the web page.
  4. In the callback function, we are sending the string "Hello World" back to the client. The 'res' parameter is used to send content back to the web page. This 'res' parameter is something that is provided by the 'request' module to enable one to send content back to the web page.
  5. We are then using the listen to function to make our server application listen to client requests on port no 3000. You can specify any available port over here.3

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

 installation output in node.js express framework material

Learn Node js - node js Tutorial - installation output in node.js express framework material - node - Node js Examples

From the output,

  • You can clearly see that we if browse to the URL of localhost on port 3000, you will see the string 'Hello World' displayed in the page.
  • Because in our code we have mentioned specifically for the server to listen on port no 3000, we are able to view the output when browsing to this URL.

What are Routes?

  • Routing refers for determining the way in which an application responds to a client request to a particular endpoint. For example, a client can make a GET, POST, PUT or DELETE http request for various URL's such as the one's shown below;

In the above example,

  • If a GET request is made for the first URL, then the response should ideally be a list of books.
  • If the GET request is made for the second URL, then the response should ideally be a list of Students.
  • So, based on the URL which is accessed, a different functionality on the web server will be invoked and accordingly the response will be sent to the client. This is the concept of routing.

Each route can have one or more handler functions, which are executed when the route is matched. The general syntax for a route is shown below

app.METHOD(PATH, HANDLER)
  • Where in,
    • app is an instance of the express module
    • METHOD is an HTTP request method (GET, POST, PUT or DELETE)
    • PATH is a path on the server.
    • HANDLER is the function executed when the route is matched.
Related nodejs article tags - node js - node js tutorial - node js examples

Sample Code:

app.route('/Node).get(function(req.res)
{
res.send("Tutorial on Node");
});
app.route('/Angular).get(function(req.res)
{
res.send("Tutorial on Angular");
});
app.get('/',function(req,res)
{
res.send('Welcome to Wikitechy Tutorials');
});

Code Explanation:

Our basic code will remain the same as previous examples. The below snippet is an add-on to show case how routing is implemented.

 routers in node.js express framework material

Learn Node js - node js Tutorial - routers in node.js express framework material - node - Node js Examples

  1. Here we are defining a route if the URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URL. The function has 2 parameters, The main parameter we will be using is the 'res' parameter which can be used to send information back to the client. The 'req' parameter has information about the request being made. Sometimes additional parameters could be sent as part of the request being made, and hence the 'req' parameter can be used to find the additional parameters being sent.
  2. We are using the send function to send the string "Tutorial on Node" back to the client if the Node route is chosen.
  3. Here we are defining a route if the URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
  4. We are using the send function to send the string "Tutorial on Angular" back to the client if the Angular route is chosen.
  5. This is the default route which is chosen when one browses to the route of the application - http://localhost:3000. When the default route is chosen, the message "Welcome to Wikitechy Tutorials" will be sent to the client.

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

 router output in node.js express framework material

Learn Node js - node js Tutorial - router output in node.js express framework material - node - Node js Examples

From the output,

  • You can clearly see that we if browse to the URL of localhost on port 3000, you will see the string 'Welcome to Wikitechy Tutorials' displayed on the page.
  • Because in our code, we have mentioned that our default URL would display this message.
 change node in node.js express framework material

Learn Node js - node js Tutorial - change node in node.js express framework material - node - Node js Examples

From the output,

  • You can see that if the URL has been changed to /Node, the respective Node route would be chosen and the string "Tutorial On Node' is displayed.
 node change in node.js express framework material

Learn Node js - node js Tutorial - node change in node.js express framework material - node - Node js Examples

From the output,

  • You can see that if the URL has been changed to /Angular, the respective Node route would be chosen and the string "Tutorial On Angular" is displayed.

Sample Web server using express.js

  • From our above example, we have seen how we can decide on what output to show based on routing. This sort of routing is what is used in most modern day web applications. The other part of a web server is about using templates in Node js.
  • When creating quick on-the-fly Node applications, an easy and fast way is to use templates for the application. There are many frameworks available in the market for making templates. In our case, we will take the example of the jade framework for templating.
  • Jade gets installed via the Node Package manager. This can be done by executing the following line in the command line
  • npm install jade
  • The above command requests the Node package manager to download the required jade modules and install them accordingly.
  • Let's use our newly installed jade framework and create some basic templates.

Step 1) The first step is to create a jade template. Create a file called index.jade and insert the below code,

 sample webserver in node.js express framework material

Learn Node js - node js Tutorial - sample webserver in node.js express framework material - node - Node js Examples

  1. Here we are specifying that the title of the page will be changed to whatever value is passed when this template gets invoked.
  2. We are also specifying that the text in the header tag will get replaced to whatever gets passed in the jade template.
Related nodejs article tags - node js - node js tutorial - node js examples

Sample Code:

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Wikitechy',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Explanation:

 webserver sample in node.js express framework material

Learn Node js - node js Tutorial - webserver sample in node.js express framework material - node - Node js Examples

  1. The first thing to specify in the application is "view engine" that will be used to render the templates. Since we are going to use jade to render our templates, we specify this accordingly.
  2. The render function is used to render a web page. In our example, we are rendering the template (index.jade) which was created earlier.
  3. We are passing the values of "wikitechy" and "Welcome" to the parameters "title" and "message" respectively. These values will be replaced by the 'title', and 'message' parameters declared in the index.jade template.

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

 sample webserver output in node.js express framework material

Learn Node js - node js Tutorial - sample webserver output in node.js express framework material - node - Node js Examples

From the output,

  • We can see that the title of the page gets set to "Wikitechy" and the header of the page gets set to "Welcome."
  • This is because of the jade template which gets invoked in our node js application.

This wikitechy technological portal provides you whole lot of information related to the topics such as mongodb tutorial , what is node js , express js tutorial , node js tutorial pdf , learn node js , node js tutorial for beginners , node js tutorial w3schools , node js express , javascript for beginners , node js express tutorial , node js tutorial point , node js book , node js server , note js , node js mongodb , what is node js used for , why node js , node tutorial , node js basics , tutorialspoint node js , node express , node js sample application , nodeschool , node js for beginners , express tutorial , node js application , use of node js , npm tutorial , node js org , node js training , node js online training , node js tutorial beginner , how to use node js , node js hello world , express node js , node js mongodb tutorial , nodejs http , why use node js

Related Searches to Node.js Express FrameWork Material