Intro to the Express Web Framework
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Intro to the Express Web Framework

on

  • 111 views

Presentation on the Express Web Application Web Framework.

Presentation on the Express Web Application Web Framework.

Statistics

Views

Total Views
111
Views on SlideShare
109
Embed Views
2

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to the Express Web Framework Presentation Transcript

  • 1. Intro to Express Web Application Framework for Node Created by /Jason Sich @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 the express generator I had 2 issues that I had to fix before being able to load the main page.
  • 4. Sidenote: Modules There are a ton 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 we are 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 middleware in 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 we can register the 'express.static' middleware to serve up static files for requests. app.use(express.static(path.join(__dirname,'public')));
  • 16. Or we can define 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