I have once again decided to rewrite and this time in node.js, I have rewritten the site both as a tutorial for new node.js developers as well as a personal blog and project page.
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.
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.
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:
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 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.
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:
To start lets build a simple static page router for a few more pages of the site:
And alter app.js to use this new router.
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
Now that we have the basic pages setup we can add in a semi-dynamic route for our blog pages.
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
All code created for this website is available on the github page and this tutorial specifically is available here: https://github.com/mikevalstar/mikevalstar_com/tree/Node_Tutorial_pt1
In the next part of this series we will be adding in custom error pages. Please Stay Tuned...