Getting Started Full Stack - Building a simple blog - Part 1

In this post, we will install the required components to build a simple blog. In the end of this post, you will be serving a hello world page, with a responsive bootstrap theme, and all necessary script files.

Server Side:

Node.js
Host the website, on javascript platform, based on Google’s V8 JavaScript Engine
Express
Web application framework for node.js
Mongodb
Open-Source NoSQL database written in C++. Also look at Mongoosejs, simple mongodb driver for nodejs.
Bower
Package manager for the web. Simplifies installing client side resources.

Client Side:

Bootstrap
Responsive front-end css framework.
JQuery
Javascript, for interactive webpages.
Backbone.js
Gives structure to web applications. Models, Collections and Views.

Let’s get Started

Introduction

Building a simple blog, solving problems along the path, it’s gonna be fun.

Web Server

Nodejs hosts the website. Serving pages, scripts and stylesheets. Expressjs is a web application framework, simplifies dealing with serving pages. It uses middleware to extend functionality like plugins.

Database

Mongodb our nosql database. it has no relational tables, but nested documents. Mongoosejs is our driver for mongodb on nodejs. Model schemas and operate.

Content Management

Bower downloads scripts and stylesheets from web into our path, we will simply reference it.

CSS Theme

Bootstrap gives the site a nice look. Responsive, meaning it will behave when resized, looks nice on any device.

Javascript

JQuery, main dependency for manipulating dom. Backbone.js is mvc framework for building client side interaction.

Backbone.js is lightweight, and heavily depends on Jquery, a popular alternative is angularjs. Angular.js doesn’t need Jquery, and is a higher level framework.

Backbone.js doesn’t implement templating. Templating is supported by mainly underscore.js or other libraries. (handlebarsjs, mustache)

Backbone.js will teach us more about structure, templating, jquery, and javascript. We should move to higher level frameworks later on. (possibly built on backbonejs) Finally, backbonejs isn’t bound to SPA’s, we may use it for other projects later on (more coming after this).

Installation

I use ubuntu/linux you should find a way to install on your platform, read the guides and google.

Npm, Node.js

# install node.js
sudo add-apt-repository -y ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

# test should look like: v0.10.12
node -v

Or, follow the Instructions

This will also install npm package manager. Npm is used to install packages required by node.js.

Mongodb

# install mongodb
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
sudo apt-get update
sudo apt-get install mongodb-10gen

# test should bring mongo shell, Ctrl-c to break
mongo

More Instructions

Bower

#install bower
npm install -g bower
# test should look like: 1.2.8
bower -v

More Instructions

Congratz, this is enough to host our simple blog. We will learn these tools along the way. Now let’s build our codebase.

Directory Structure

Build the following directory structure. public folder will host our public pages, scripts and stylesheets. ‘scripts’ folder will host javascript code for running the nodejs server, interacting with mongodb.

../mysimpleblog
`-- app
    |-- public
    |   `-- js
    |       |-- collections
    |       |-- models
    |       |-- routers
    |       `-- views
    `-- scripts

Configuration

Package.json

package.json is a packaging format for node.js. Important part here is dependencies, where we declare dependencies for our project. Place it in root folder of your project, where your app folder resides.

express : web application framework, It uses middleware to handle http requests. Middleware could be third party code, which we will use shortly.

baucis : Baucis is Express middleware that creates configurable REST APIs using Mongoose schemata

connect : Lower level middleware for node.js, not important for us any time soon. baucis needs it so we include.

.bowerrc

.bowerrc file will change bower’s default components folder. Place it in root folder of your project.

Installing packages

Server side dependencies are defined in package.json, and installed with npm. Client side dependencies are defined in bower.json and installed with bower.

However we won’t be using bower.json rather install the required files manually.

# install server side packages (defined in package.json)
npm install
#install client side packages manually with bower
bower install bootstrap
bower install fontawesome

bower install jquery
bower install backbonejs
bower install underscore

Server side packages can be directly used in javascript code, we will see how that’s done later. Client side packages are simply files downloaded in directory we defined in .bowerrc so you can check it out there. We will reference them in our index.html.

Setting up the server

Final step is to actually setup the server, so we can host our files. Go to app/scripts directory and create the two files below.

Further information: middleware , require .

Finally we need an index.html to serve, and we are ready to launch. Go to app/public directory and create the file below.

Launch Time

To run the server go to app folder and run:

# test: output should be 
   # - listening on port 3000
   node ./scripts/web

Now launch your browser and locate to http://localhost:3000.

One final note here is that, if you make changes inside app/public folder, a browser refresh is enough to see the changes, if you make changes inside app/scripts folder, you need to restart the server, in order to changes to take effect. There are tools to live reload every change but that’s for a later time.

Please share your thoughts below. Thank you.

Gulp Workflow For Building Web Projects

Gulp Workflow For Building Web ProjectsIn this quick tip, we will build a simple and fast gulp workflow for building web projects.If you …… Continue reading

Hayat Hikayem

Published on October 09, 2014

Building a Voting App: Front-end /w ember

Published on September 17, 2014