Learning MEAN Stack: Express JS - 101

MEAN
Express JS is a web framework which makes it easier to build a web server in Node JS.
Express helps in writing the NodeJS code cleanly.
Installation
  1. npm install express --save
  1. Building and running HTML on a web server
No need to mention header with Content-Type etc. like done before in nodejs.
  1. var express = require('express');
  3. var app = express();
  5. app.get('/', function(req,res){
  6. res.send('<html><head></head><body><h1>Hello Sarthak, Welcome to express!</h1></body></html>')
  7. });
  8. app.listen(3000);
run as >nodemon file.js

2. Using it to build a API.
  1. var express = require('express');
  3. var app = express();
  5. app.get('/api', function(req,res){
  7.     res.json({firstname: 'Sarthak', lastname: 'Srivastava'})
  8. });
  9. app.listen(3000);
Send request to localhost:3000/api

3. Routing in express js
  1. var express = require('express');
  3. var app = express();
  4. app.get('/person/:id', function(req, res){
  6. res.send('<html><head></head><body><h1>Hello, Your ID is : '+req.params.id+'</h1></body></html>')
  8. });
  9. app.listen(3000);
request to http://localhost:3000/person/123

4. Using static files and middleware using Express
Middleware means code that sits between req. and res.
Where static files are HTML, CSS, IMG etc files
//middleaware
  1. app.use('/assets', express.static(__dirname, +'/public'));
  1. var express = require('express');
  3. var app = express();
  5. app.use('/assets', express.static(__dirname, +'/public'));
  7. app.get('/css', function(req,res){
  9. res.send('<html><head><link href = assets/style.css type = text/css rel=stylesheet></link></head><body><h1>Hello Sarthak, Welcome to express!</h1></body></html>')
  11. });
  12. app.listen(3000);
public/style.css
  1. body{
  3.     background: pink;
  4.    
  5. }
req to http://localhost:3000/css


4. Template and Template Engines in Express JS
Express comes with whole variety of template engines like JADE, EJS etc
Lets use EJS, it is similar to ASP.net, PHP etc.
Installing EJS
  1. npm install ejs --save
index.ejs
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Hello to EJS.
  7.         </h1>
  8.     </body>
  9. </html>
Person.ejs
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Person: <%= ID %> <br/>
  7.             Person ID length: <%= ID.length %>
  8.         </h1>
  9.     </body>
  10. </html>
app2.js
  1. var express = require('express');
  3. var app = express();
  5. app.set('view engine','ejs');
  7. app.get('/', function(req, res){
  9.     res.render('index');
  10. });
  12. app.get('/person/:id', function(req, res){
  14.     res.render('Person', {ID: req.params.id});
  15. });
  17. app.listen(3000);
http://localhost:3000/

http://localhost:3000/person/sarthak

5. Rendering Query String
In a GET request the query string can be rendered from the API url.
GET/api?id=4&page=3
  1. var express = require('express');
  3. var app = express();
  4. app.set('view engine','ejs');
  6. //GET
  8. app.get('/person/:id', function(req, res){
  10.     res.render('personGet',{
  11.         ID: req.params.id,
  12.         Qstr: req.query.Qstr
  13.     });
  14. })
  16. app.listen(3000);
personGet.ejs
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h1>
  6.             Person: <%= ID %>
  7.             <br/>
  8.              Query String value: <%= Qstr %>
  9.         </h1>
  10.     </body>
  11. </html>
http://localhost:3000/person/tony?Qstr=123

6. Accessing POST request parameters
It can be done via body-parser module
  1. npm install body-parser --save
Since in POST request the query string is in the body of the request unlike the GET request.
Here for HTML data we will use URLencodedParser
js file
  1. var express = require('express');
  2. var bodyparser = require('body-parser')
  3. var app = express();
  4. app.set('view engine','ejs');
  6. var urlencodedparser = bodyparser.urlencoded({extended:false})
  10. app.get('/', function(req, res){
  12.     res.render('bodyparserpost');
  13. });
  15. app.post('/person',urlencodedparser, function(req, res){
  17.   res.send('Thank you for POST req.')
  18.   console.log(req.body.firstname);
  19.   console.log(req.body.lastname);
  20. })
  22. app.listen(3000);
ejs code file
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. Fill the form:
  6. <form method="POST" action="/person">
  8.    firstname: <input type="text" id="firstname" name="firstname" />
  9.     <br/><br/>
  10.     lastname: <input type="text" id="lastname" name="lastname" />
  11.     <br/><br/>
  12.     <input type="submit" value="submit"/>
  13. </form>
  14. </body>
  15. </html>
http://localhost:3000/

 Click on Submit:
















































Comments

Post a Comment

Popular posts from this blog

AWS LEX - Developing a Simple Chat Bot

Image
What are Chat Bots? Chat Bot is a service that runs on rules or Artificial intelligence The users interact using natural and conversational Language. Chat Bots are like your personal assistants that actually assist you. They can live in any chat applications like Slack, Facebook messenger, Skype etc. Common example: Weather Bots - fetches forecast, current weather etc. Top 5 tools to develop Chat Bot: Lex (Amazon Web Services) Api.ai (Google) Azure Bot Service (Microsoft) Wit.ai (Facebook) Watson (IBM) Building a Chat Bot using Amazon Web Services: What is AWS Lex? Lex is AWS service for building conversational interfaces for any applications using voice and text. Lex enables you to build sophisticated, natural language Chat Bots into your new and existing applications. Lex can serve a variety of use cases, customer support, transaction fulfillment, data retrieval, or even DevOps functions ( ChatOps ). AWS Lambda : Lex is integrated with AWS Lam...
Read more

Connecting Mongo DB with NodeJS

Image
To use mongo Db with the Node here we can use Mongoose npm package and mlab.com as mongo db cloudeservice provider. Setup the mlab account mlab.com provides the initial 500MB free account for new users. Create an account in mlab.com Select "Create new" in MongoDB Deployments Click on free "Sandbox" account plan Enter the Database name for example "diary" DB has been created Highlighted text shows the DB URI link by which we can connect with DB. Now install mongoose package in Node Js by npm install mongoose --save in CLI  Node js code is below to connect Node Js with Mongo DB. In below code we will create two documents in DB. var express = require( 'express' ); var mongoose = require( 'mongoose' ); var app = express(); //connecting to the DB mongoose.connect( 'mongodb://sarthakdb:123ertyu@ds243345.mlab.com:43345/diary' ); //creating a Schema var Sch...
Read more

BUILDING A CHAT BOT USING MICROSOFT AZURE BOT SERVICE & LUIS

Image
What is Azure Bot Service ? For  introduction to chat bots  please refer this link  here Azure Bot Service  is a intelligent, serverless bot development service introduced by Microsoft Azure on  Azure Portal . This service is used to develop conversational bots with the help of various templates, cognitive services by Microsoft. LUIS  : LUIS is the  L anguage Understanding Intelligent Service .   LUIS  enables developers to build smart applications that can understand human language and react accordingly to user requests. For more information on LUIS visit  here Prerequisites for building a chat bot on Microsoft Azure Portal: MSDN account for Azure Knowledge of any one of the languages ( C#  or  Node JS ) Basic knowledge of Artificial intelligence Building a Simple Chat Bot #1 – Go to  Azure Portal  and search for Bot Service under Data + Analytics #2 – Create a BOT by filling the detai...
Read more