Node.js npm express - Quick Start

Quick Start guide to get your web site up and running quickly using Node.js, npm, and the express web framework.

Transcript

1. LibreOffice Productivity Suite 1 Node.js npm express Quick Start Guide Topics: • Introduction to node, npm, and express. • Install node, npm, express • Develop your own web application
2. LibreOffice Productivity Suite 2 Introduction to Node.js • Node – use Javascript to write network and cloud applications • Why node: Create network applications using one language Javascript Use Javascript on the server and on the client Supports modular development
3. LibreOffice Productivity Suite 3 Introduction to npm • Npm is the node package manager Supports local and global package repositories • Npm commands: List installed modules: $ npm ls Install a global module: $ npm install -g [name] Install a local module: $ npm install [name]
4. LibreOffice Productivity Suite 4 Introduction to express • Express is a web application framework • Why express: Mature application framework Continuing development Supports modular designs Easy to use Supports web routing and asynchronous calls
5. LibreOffice Productivity Suite 5 Install node npm express (or build) • Node: $ sudo apt-get install nodejs • npm: $ sudo apt-get install npm • express: $ npm install -g express
6. LibreOffice Productivity Suite 6 Write Your Web Application • Generate your web application using express $ express mysite
7. LibreOffice Productivity Suite 7 Introduction to node.js • Node – use Javascript to write applications • Why node: Create network applications using one language Javascript Use Javascript on the server and on the client Accepted platform for cloud application development
8. LibreOffice Productivity Suite 8
9. LibreOffice Productivity Suite 9 Install your Dependencies • Let npm install the required modules: $ cd mysite $ npm install
10. LibreOffice Productivity Suite 10 View • mysite/public – contains your static files • View managers are configured: Express uses Jade as the default view manager. In app.js: app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade');
11. LibreOffice Productivity Suite 11 Convert html2jade • Start with your own static web site • Convert the html to jade templates $ npm install -g html2jade Go to your static web directory Example: $ html2jade index.html Creates index.jade • Move your new static content (folders and all) into mysite/public • Clean up unused files and folders
12. LibreOffice Productivity Suite 12 • Quick Test It Runs • Try it out $ cd mysite $ node app.js • Open to view at localhost:3000 • Document type and head are repeated Document type and head are repeated twice twice • Layout.js is the default layout template
13. LibreOffice Productivity Suite 13 Layout.js • Layout.js contains the default site layout Cut your document type and header section from your converted index.jade Paste that into your layout.js Move index.jade “body” all the way to the top left • Jade uses indentation position so body needs to be at the top and to the left in your index.jade
14. LibreOffice Productivity Suite 14 Test • Now run your site $ cd mysite $ node app.js • Open to view at localhost:3000 • In development mode issues show up in the browser. Fix any issues and retry immediately.
15. LibreOffice Productivity Suite 15 Next learn • Apply jade partials to templatize widgets • Learn and apply web routes • Add ajax calls
16. LibreOffice Productivity Suite 16 Sources • https://github.com/visionmedia/express • http://expressjs.com/ • http://shapeshed.com/creating-a-basic-site-with-n • https://github.com/donpark/html2jade