Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Node.js & Twitter Bootstrap Crash Course

28.384 Aufrufe

Veröffentlicht am

Slides from Node.js and Twitter Bootstrap crash course given to Penn Graduate Computing Club. Covers creating basic node app, using the bootstrap grid, and deploying to an EC2 machine.

Veröffentlicht in: Technologie
  • I have done a couple of papers through ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ they have always been great! They are always in touch with you to let you know the status of paper and always meet the deadline!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • www.HelpWriting.net helped me too. I always order there
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Was a little hesitant about using ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ at first, but am very happy that I did. The writer was able to write my paper by the deadline and it was very well written. So guys don’t hesitate to use it.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • My experience with essay services has generally been very positive. I requested a writer from HelpWriting.net to write my English essay on Jane Eyre because I was really short on time (that week my family had to move houses unexpectedly and I had no time whatsoever to sit down at a computer and do work.) Needless to say the services were good and my essay was done really quickly. The writer that I picked followed directions well. Of course, if you can do it yourself, then do so but if it’s an end-all-be-all situation I definitely recommend HelpWriting.net
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Node.js & Twitter Bootstrap Crash Course

  1. 1. Node.js Web App CRASH COURSE By Aaron Silverman, Code Slinger at Video BlocksMarch 19, 2014
  2. 2. Note: node.js is getting more and more popular every year! Node.js - download and install it!
  3. 3. var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); Create simple server web server server.js
  4. 4. Run simple web server $ node server.js Server running at http://127.0.0.1:1337/
  5. 5. Connect to simple web server
  6. 6. Why reinvent the wheel? Packages FTW! $ npm install -g express-generator ... express-generator@3.0.0 /usr/local/lib/node_modules/express-generator ├── mkdirp@0.3.5 └── commander@1.3.2 (keypress@0.1.0)
  7. 7. Create skeleton web application $ express --ejs myapp ... create : myapp ... install dependencies: ... run the app:
  8. 8. Install dependencies $ cd myapp $ npm install … express@3.4.8 node_modules/express ...
  9. 9. Start web application $ npm start > application-name@0.0.1 start /Users/aaron/Workspace/upenn/myapp > node ./bin/www
  10. 10. Connect to web application
  11. 11. What’s going on? automagically created folders and files
  12. 12. package.json is key started by npm start installed by npm install
  13. 13. require - import/include other files and packages imports debug package imports app file what is exported
  14. 14. Middleware Magic view engine modules middleware routing
  15. 15. Route handlers render view
  16. 16. View - Embedded JavaScript view variable
  17. 17. Spice up our root page - route handler exports.index = function(req, res){ res.render('index', { title: 'Express' }); res.render('index', {title: 'Express', name: 'Aaron'}); }; routes/index.js
  18. 18. Spice up our root page - view <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <p>&ldquo;Welcome to <%= title %>&rdquo;</p> <p>&mdash; <%= name %><p> </body> views/index.ejs
  19. 19. Restart and connect $ npm start
  20. 20. Internet folks love cats
  21. 21. Cat image image file
  22. 22. Cat view <!DOCTYPE html> <html> <head> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1>Cat</h1> <img src="/images/cat.jpg" /> </body> </html> views/cat.ejs
  23. 23. Cat route handler exports.index = function(req, res) { res.render('index', {title: 'Penn', name: 'Aaron'}); }; exports.cat = function(req, res) { res.render('cat'); } routes/index.js
  24. 24. Cat route app.get('/', routes.index); app.get('/users', users.list); app.get('/cat', routes.cat); app.js
  25. 25. Enough manual restarting - nodemon $ sudo npm install -g nodemon ... nodemon@1.0.15 …
  26. 26. Tell nodemon what to run "scripts": { "start": "node ./bin/www" }, "main": "bin/www", "dependencies": { package.json
  27. 27. Start server using nodemon $ nodemon [nodemon] v1.0.15 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node bin/www`
  28. 28. Navigate to cat page
  29. 29. Name that cat
  30. 30. Name that cat - route handler exports.cat = function(req, res) { var name = req.param('name','Mr. Cat'); res.render('cat'); res.render('cat', {name: name}); } routes/index.js
  31. 31. Name that cat - view <body> <h1>Cat</h1> <h1>Meet <%= name %>, the Cat.</h1> <img src="/images/cat.jpg" /> </body> routes/index.js
  32. 32. Revisit cat page
  33. 33. Pass name in query parameter
  34. 34. Moar Cats!
  35. 35. Twitter Bootstrap - CSS for dummies
  36. 36. Bootstrap grid and components CSS classes also makes special components CSS class “row” starts row of a 12 column grid CSS class “col-md-N” starts a responsive N-column wide grid element Note: rows can be nested inside columns for a nested grid
  37. 37. Cat view - bootstrap css/js <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> … <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> </html> views/cat.ejs Note: instead of using external assets we could also have downloaded and extracted these files into the public/stylesheets and public/javscripts directories.
  38. 38. Cat view - name jumbotron <body> <div class="jumbotron"> <h1>Meet <%= name %>, the Cat.</h1> <p>Best cat in the land</p> </div> views/cat.ejs
  39. 39. Cat view - cat grid <div class="container cat-grid"> <div class="row"> <div class="col-md-4"> <img src="/images/cat.jpg" /> </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> <img src="/images/cat.jpg" /> </div> </div> </div> views/cat.ejs <div class="row"> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> </div> <div class="row"> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> </div>
  40. 40. Cat view - cat style .cat-grid img { height: 100px; } public/stylesheets/style.css
  41. 41. Moar, responsive, cats
  42. 42. Module Time
  43. 43. Npm install and save $ npm install --save express-partials npm http GET https://registry.npmjs.org/express-partials npm http 304 https://registry.npmjs.org/express-partials express-partials@0.2.0 node_modules/express-partials
  44. 44. Added to package.json newly installed package
  45. 45. Use new middleware var bodyParser = require('body-parser'); var partials = require('express-partials'); var routes = require('./routes'); var users = require('./routes/user'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(partials()); app.use(favicon()); app.js
  46. 46. Create common view layout views/layout.ejs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> </html>
  47. 47. Clean up cat view views/cat.ejs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> … <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> </html>
  48. 48. Clean up index view views/index.ejs <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> … </body> </html>
  49. 49. Revisit Pages $ nodemon
  50. 50. How can Grandma see the cat?
  51. 51. Deploy on the interwebs!
  52. 52. Transfer code to your server $ scp -i ~/.ssh/macbookair.pem -r myapp/ ubuntu@ec2-23- 20-153-76.compute-1.amazonaws.com:~/ Note: Ideally your code is checked into a source control repository such as git, and you would add your server’s public key to be allowed to access to the repository. Then you would do something like: $ ssh -i .ssh/macbookair.pem ubuntu@ec2-23-20-153-76.compute-1.amazonaws.com $ git clone git@github.com:Username/myapp.git
  53. 53. Install node.js on your server $ ssh -i .ssh/macbookair.pem ubuntu@ec2-23-20-153-76. compute-1.amazonaws.com $ sudo apt-get install python-software-properties $ sudo apt-add-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs $ node --version v0.10.26
  54. 54. Install dependencies $ cd myapp $ npm install Note: If you transferred your node_modules folder (such as scp did in this presentation) this won’t be necessary. However typically that folder should be ignored by version control (e.g. in .gitignore) and you will have to do this step.
  55. 55. Allow HTTP traffic for the server
  56. 56. Allow port forwarding to listen port $ sudo vim /etc/sysctl.conf (uncomment net.ipv4.ip_forward) $ sudo sysctl -p /etc/sysctl.conf net.ipv4.ip_forward = 1 $ sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000
  57. 57. Start and connect to server $ npm start > application-name@0.0.1 start /home/ubuntu/myapp > node ./bin/www
  58. 58. Forever - run node as a daemon $ sudo npm install -g forever … forever@0.10.11 /usr/lib/node_modules/forever … $ forever start bin/www warn: --minUptime not set. Defaulting to: 1000ms warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms info: Forever processing file: bin/www
  59. 59. Website now live forever!

×