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.
- Web application framework for node.js
- Open-Source NoSQL database written in C++. Also look at Mongoosejs, simple mongodb driver for nodejs.
- Package manager for the web. Simplifies installing client side resources.
- Responsive front-end css framework.
- Gives structure to web applications. Models, Collections and Views.
Let’s get Started
Building a simple blog, solving problems along the path, it’s gonna be fun.
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.
Mongodb our nosql database. it has no relational tables, but nested documents. Mongoosejs is our driver for mongodb on nodejs. Model schemas and operate.
Bower downloads scripts and stylesheets from web into our path, we will simply reference it.
Bootstrap gives the site a nice look. Responsive, meaning it will behave when resized, looks nice on any device.
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.
I use ubuntu/linux you should find a way to install on your platform, read the guides and google.
# 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.
# 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
#install bower npm install -g bower # test should look like: 1.2.8 bower -v
Congratz, this is enough to host our simple blog. We will learn these tools along the way. Now let’s build our codebase.
../mysimpleblog `-- app |-- public | `-- js | |-- collections | |-- models | |-- routers | `-- views `-- scripts
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 file will change bower’s default components folder. Place it in root folder of your project.
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
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.
Finally we need an index.html to serve, and we are ready to launch. Go to app/public directory and create the file below.
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.