Intro to the Express Web Framework

Intro to the Express Web Framework

• 1.
  Intro to Express Web Application Framework for Node Created by /JasonSich @jasich
• 2.
  Let's make a Web App! //Installtheexpressgenerator $npminstall-gexpress-generator //Createanewexpressapp $expresshelloGrNodeDev $cd./helloGrNodeDev //Installdependenciesforexpress $npminstall //Runit! $npmstart ... Expressserverlisteningonport3000
• 3.
  Well that was almost too easy While running theexpress generator I had 2 issues that I had to fix before being able to load the main page.
• 4.
  Sidenote: Modules There are aton of modules out there, but not all of them get updated in a timely manner. When dependencies break your app it can be painful to fix.
• 5.
  Default Structure app.js =>Expressserver package.json =>NPMpacakgefile public=>Staticdirectorytoserveupfilesfrom -images -javascripts -stylesheets routes =>Defineyourroutinghere views =>Containshtmlviews This structure can be modified to suit your needs. Express does not force any conventions on you.
• 6.
  Simple Server varexpress=require('express'); varapp=express(); app.get('/hello',function(req,res){ res.send('HelloWorld'); }); varserver=app.listen(3000,function(){ console.log('Listeningonport%d',server.address().port); });
• 7.
  Serving Files Statically varpath=require('path'); //Servestaticfilesdirectlyfromthe'public'directory app.use(express.static(path.join(__dirname,'public')));
• 8.
  Using Dynamic Views //Setsthelocationofourtemplatefilesforviews //Thisiswhereallthejadetemplatesgo app.set('views',path.join(__dirname,'views')); //Setstheviewengineto'jade'becausewe'resoEmo app.set('viewengine','jade'); //ForHTTPGETrequestsserveuptheindexview //Setthetitleto'Express' app.get('/',function(req,res){ res.render('index',{title:'Express'}); });
• 9.
  All Together Now varexpress=require('express'), path=require('path'); varapp=express(); app.set('views',path.join(__dirname,'views')); app.set('viewengine','jade'); app.use(express.static(path.join(__dirname,'public'))); app.get('/',function(req,res){ res.render('index',{title:'Express'}); }); app.listen(3000,function(){ console.log('Listeningonport%d',server.address().port); });
• 10.
  Example Jade Template //index.jade doctypehtml html head title=title link(rel='stylesheet',href='/stylesheets/style.css') body h1=title pWelcometo#{title}
• 11.
  It Needs an API Let's say weare using a front-end JS framework and need to serve up some data in JSON.
• 12.
  Shut the Front Door, That Easy? //RegistersahandlerforanHTTPGETrequestto'/animals' app.get('/animals',function(req,res){ varanimals=[ {name:'SharkOwl'}, {name:'Liger'}, {name:'Zebroid'} ]; //Justsendthearrayasaresponse res.send(animals); });
• 13.
  And a Post? . app.use(express.bodyParser()); . //RegistersahandlerforanHTTPPOSTrequestto'/animals' app.post('/animals',function(req,res){ varnewAnimal=req.body; //Lettheclientknowthatthingsarecoolwithus res.send(201,{success:true}); });
• 14.
  What's up with app.use()? It registers middlewarein your Express application. Middleware is additional functionality injected into request handling. There is an order to middleware. If one piece of middleware services a request, the request is considered handled and the rest of the middleware is not used.
• 15.
  For example wecan register the 'express.static' middleware to serve up static files for requests. app.use(express.static(path.join(__dirname,'public')));
• 16.
  Or we candefine our own: app.use(function(req,res,next){ if(!req.get('authorization')){ res.Send(403,"NotAllowedSon,BetterLuckNextTime"); }else{ next(); } });
• 17.
  The End BY Jason Sich