Permalink
Browse files

first draft of node.js 1 tutorial

  • Loading branch information...
1 parent 8263489 commit 12dd05ef15cf5656d7cf307206d6739842a96610 @mikevalstar committed Nov 11, 2011
View
7 app.js
@@ -1,15 +1,10 @@
/**
* Module dependencies.
*/
-
-require.paths.unshift(__dirname + '/lib');
-
var express = require('express');
var app = module.exports = express.createServer();
-var sqlite = require('sqlite');
// Configuration
-
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
@@ -28,7 +23,7 @@ app.configure('production', function(){
});
// Internal Page Handlers
-var static_pages = require('StaticPages');
+var static_pages = require('./lib/StaticPages');
var sp = new static_pages();
sp.initPages(app);
View
@@ -93,6 +93,13 @@ a.flickr{ background: url('../img/social/16px/flickr.png') no-repeat bottom left
.blogMini img, .blogPost img{ max-width: 98%; outline: 1px solid #CCC; border: 3px solid white; margin: 5px 15px; }
+.blogPost ul, .blogPost ol { margin: 0.3em 1.8em; }
+
+pre{ font-size: 0.8em; margin: 0.3em 3em; padding: 0.2em 1em; border: 1px solid #BBB; background: #DDD; }
+code{ }
+
+.gist{ font-size: 0.9em; margin: 0.3em 3em; }
+
/* Content: About */
#aboutContent{ float: left; width: 70% }
#aboutFindMe{ float: left; width: 28%; }
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -5,7 +5,6 @@
, "dependencies": {
"express": "2.4.7"
, "jade": ">= 0.0.1"
- , "sqlite": ">= 0.0.1"
, "markdown-js": ">= 0.0.1"
}
}
File renamed without changes.
View
@@ -0,0 +1,79 @@
+I have once again decided to re-write and this time in node.js, I have also decided to write the website asa tutorial for new developers for node.js as well.
+
+Since college I have primarily been a PHP developer, building OOP websites with a combination of PHP, Smarty, PDO and other good practice techniques; however since the birth of node I followed the development of the project and more recently started using node for my production projects. Node has proved to be a great tool for rapidly creating websites both semi-static and highly interactional; it is highly responsive and is a better fit for progressively loaded pages over PHP and most other languages I have used in the past.
+
+When I started coding websites in the late 90s webpages were primarily rendered and produced by the web server and very little was done on the client side (flash and java applets not withstanding). In recent years with the proliferation of advanced javascript libraries such as jQuery and the browser wars re-igniting has brought forth an array of new techniques for client-side manipulation and rendering of a website. This has created shorter code-paths on the server-side pages and increased the request count for any given "page" on a website. Node.js has been built with this in mind and personally I feel is a great fit for this new and emerging web.
+
+So here we are building a new website in node.js, we will use Express and later Mongoose with MongoDB for the creation and maintenance of this website. Heavy emphasis will be placed on progressive page loading, external tools for items like blog comments and as we progress high availability and large traffic handling.
+
+## Getting Started
+
+To begin we are going to start with a basic website that allows for statically coded blog posts to be used and a few pages static pages designed. A simple site to be sure but something to build on later.
+
+For reference this project we are using the following:
+* Node.js v0.6.0 - Installation Instructions
+* NPM v1.0.105 - Installation Instructions
+* Express v2.5.0 - Installation Instructions
+
+To begin we will have express generate a simple website structure including a basic template and app.js file:
+
+ $ express /www/website && cd /www/website
+
+And install the dependancies
+
+ $ npm install -d
+
+## Running the App
+Running your app with the base express install is easy:
+
+ $ node app.js
+
+And you are all set, it should spit out the port the new website is running at (usually 3000) and you can surf to http://localhost:3000 to view your new website.
+
+For production you will need to run your web server using the following command:
+
+ $ NODE_ENV=production node app.js
+
+This will allow for things like caching and we will take advantage of later to suppress errors and other useful things in the future.
+
+## Building the Layout
+For this site I'm going to use every new technique and buzzword technique possible on the front end to better demonstrate how to code for these designs.
+
+For the navigation of the website we will be using the hashbang technique for traffic routing and dynamic content loading without a full page refresh while at the same time making sure all pages have a permalink and is fully navigable by the google crawlers.
+
+The layout of the site is going to be using Responsive Design (yay css selectors) for the layout of the site in order to better serve larger screens and mobile devices.
+
+And later we will be implementing Lazy Loading of images and some content in order to reduce bandwidth and page loading times.
+
+The use of these design techniques do not really apply directly to the backend coding so I will cover these in separate tutorials at a later date. For the purpose of this tutorial lets stick with a simple design.
+
+The base express install comes with a simple layout & page combo to get you started. Lets start by modifying them slightly:
+### views/layout.jade
+
+### views/index.jade
+
+## Writing a Simple Page Router
+To start lets build a simple static page router for a few more pages of the site:
+
+### lib/StaticPages.js
+
+And alter app.'s to use this new router.
+
+### app.js
+
+What we are doing now is loading up the StaticPage.js file as a variable "static_pages" and calling the initPages() function in order to init these new routes.
+
+_feel free to add more static pages as needed and to add the corresponding jade files_
+
+## A SimpleDynamic Route
+Now that we have the basic pages setup we can add in a semi-dynamic route for our blog pages.
+
+### lib/StaticPages.js
+
+The ":id" and ":title" variables allow us to use portions of the URI in order to determine content and we are using them to load the blog posts from the **posts** folder located in the **views** directory
+
+## The Code
+All code created for this website is available on the github page and this tutorial specifically is available here:
+
+## Next Time
+In the next part of this series we will be adding in custom error pages. Stay Tuned...
View
@@ -0,0 +1,129 @@
+.blogPost
+
+ h2
+ a(href="/Blog/103/Coding_with_Node.js_Part_1_Getting_started_with_Express") Coding with Node.js: Part 1; Getting started with Express.
+ h5 Posted on
+ time(pubdate="2011-11-11") November 11
+ sup th
+ | 2011
+
+ div.tc: img(src="/usrimg/node_js.png")
+
+ :markdown
+ I have once again decided to re-write and this time in node.js, I have also decided to write the website asa tutorial for new developers for node.js as well.
+
+ Since college I have primarily been a PHP developer, building OOP websites with a combination of PHP, Smarty, PDO and other good practice techniques; however since the birth of node I followed the development of the project and more recently started using node for my production projects. Node has proved to be a great tool for rapidly creating websites both semi-static and highly interactional; it is highly responsive and is a better fit for progressively loaded pages over PHP and most other languages I have used in the past.
+
+ When I started coding websites in the late 90s webpages were primarily rendered and produced by the web server and very little was done on the client side (flash and java applets not withstanding). In recent years with the proliferation of advanced javascript libraries such as jQuery and the browser wars re-igniting has brought forth an array of new techniques for client-side manipulation and rendering of a website. This has created shorter code-paths on the server-side pages and increased the request count for any given "page" on a website. Node.js has been built with this in mind and personally I feel is a great fit for this new and emerging web.
+
+ So here we are building a new website in node.js, we will use Express and later Mongoose with MongoDB for the creation and maintenance of this website. Heavy emphasis will be placed on progressive page loading, external tools for items like blog comments and as we progress high availability and large traffic handling.
+
+ h3 Getting Started
+ :markdown
+ To begin we are going to start with a basic website that allows for statically coded blog posts to be used and a few pages static pages designed. A simple site to be sure but something to build on later.
+
+ For reference this project we are using the following:
+
+ * Node.js v0.6.0 - Installation Instructions
+ * NPM v1.0.105 - Installation Instructions
+ * Express v2.5.0 - Installation Instructions
+
+ To begin we will have express generate a simple website structure including a basic template and app.js file:
+
+ pre: code $ express /www/website && cd /www/website
+
+ :markdown
+ And install the dependancies
+
+ pre: code $ npm install -d
+
+ h3 Running the App
+ :markdown
+ Running your app with the base express install is easy:
+
+ pre: code $ node app.js
+ :markdown
+ And you are all set, it should spit out the port the new website is running at (usually 3000) and you can surf to http://localhost:3000 to view your new website.
+
+ For production you will need to run your web server using the following command:
+
+ pre: code $ NODE_ENV=production node app.js
+ :markdown
+ This will allow for things like caching and we will take advantage of later to suppress errors and other useful things in the future.
+
+ h3 Building the Layout
+ :markdown
+ For this site I'm going to use every new technique and buzzword technique possible on the front end to better demonstrate how to code for these designs.
+
+ For the navigation of the website we will be using the hashbang technique for traffic routing and dynamic content loading without a full page refresh while at the same time making sure all pages have a permalink and is fully navigable by the google crawlers.
+
+ The layout of the site is going to be using Responsive Design (yay css selectors) for the layout of the site in order to better serve larger screens and mobile devices.
+
+ And later we will be implementing Lazy Loading of images and some content in order to reduce bandwidth and page loading times.
+
+ The use of these design techniques do not really apply directly to the backend coding so I will cover these in separate tutorials at a later date. For the purpose of this tutorial lets stick with a simple design.
+
+ The base express install comes with a simple layout & page combo to get you started. Lets start by modifying them slightly:
+ #### layout.jade
+ script(src="https://gist.github.com/1358857.js?file=layout.jade")
+ :markdown
+ #### index.jade
+ script(src="https://gist.github.com/1358857.js?file=index.jade")
+
+ h3 Writing a Simple Page Router
+ :markdown
+ To start lets build a simple static page router for a few more pages of the site:
+
+ #### lib/StaticPages.js
+ script(src="https://gist.github.com/1358857.js?file=StaticPages.js")
+ :markdown
+ And alter app.js to use this new router.
+
+ #### app.js
+ script(src="https://gist.github.com/1358857.js?file=app.js")
+ :markdown
+ What we are doing now is loading up the StaticPage.js file as a variable "static_pages" and calling the initPages() function in order to init these new routes.
+
+ _feel free to add more static pages as needed and to add the corresponding jade files_
+
+ h3 A SimpleDynamic Route
+ :markdown
+ Now that we have the basic pages setup we can add in a semi-dynamic route for our blog pages.
+
+ #### lib/StaticPages.js
+ script(src="https://gist.github.com/1358857.js?file=StaticPagesv2.js")
+ :markdown
+ The ":id" and ":title" variables allow us to use portions of the URI in order to determine content and we are using them to load the blog posts from the **posts** folder located in the **views** directory
+
+ h3 The Code
+ :markdown
+ All code created for this website is available on the github page and this tutorial specifically is available here:
+
+ h3 Next Time
+ :markdown
+ In the next part of this series we will be adding in custom error pages. Stay Tuned...
+
+ h4 Credits / Changelog
+
+#disqus_identity bp_103
+#disqus_permalink
+ a(href="http://mikevalstar.com/Blog/103/Coding_with_Node.js_Part_1_Getting_started_with_Express") http://mikevalstar.com/Blog/103/Coding_with_Node.js_Part_1_Getting_started_with_Express
+#disqus_thread
+
+script(type="text/javascript")
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'mikevalstar'; // required: replace example with your forum shortname
+ disqus_identifier = $('#disqus_identity').html();
+ disqus_url = $('#disqus_permalink a').attr('href');
+
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+
+noscript Please enable JavaScript to view the
+ a(href="http://disqus.com/?ref_noscript") comments powered by Disqus.
+a.dsq-brlink(href="http://disqus.com")blog comments powered by
+ span.logo-disqus Disqus

0 comments on commit 12dd05e

Please sign in to comment.