Setting up a Sleek Node JS Server and a Simple Bootstrap Website

Setting up a Sleek Node JS Server

... and a Simple Bootstrap Website



My goal is to teach you the basic computer skills every entrepreneur needs to set up a landing page for his or her company. Because I will also teach you how to set up a server, this landing page can be expanded into a full fledged website at any time.


1. What is a computer?

A computer is "an electronic device for storing and processing data, typically in binary form, according to instructions given to it in a variable program" (Oxford English Dictionary 2013). In layman's terms, whatever you are using to access this website is a computer.


2. What is a server?

A server is "a computer or computer program that manages access to a centralized resource or service in a network" (Oxford English Dictionary 2013). In layman's terms, a server is a giant computer whose sole purpose is to receive requests for a website from other computers and respond with the content of the website. For instance, when you go to google.com in a browser, your request for google.com is trasmitted via the internet to the google server. The google server then sends back some content. The content in this case is the familiar white page with the colorful Google letters and a search bar underneath.


3. Building the Website

We are going to use the programming language javascript to build our server. The server side javascript we will use is called node.js.

We will put all our work in a folder as any organized person would. Then, we will connect this folder to GitHub which is a service that employs the Git revision control system. A revision control system is a way of managing "changes to documents, computer programs, large web sites, and other collections of information" (Wikipedia 2013).

In layman's terms, GitHub is a server (recall what server means) that stores a version of our folder every time we ask it to. The collection of these versions is known as a GitHub repository. It is just like saving a version of your essay on Word, except this time its for an entire folder rather than one document. Moreover, different people can connect their own folders to the same GitHub repository. Everytime they push a version of their folder, that version will be saved as well and marked as the latest. You can work other people this way. Everyone simply pushes and pulls content from a single repository on the remote GitHub server. Don't worry too much about how this is done specifically, because we will go over that later.

  1. Go to nodejs.org and press install.
  2. Double click on the downloaded package and keep following the installer's instructions until the installer tells you that you have successfully installed node.js on your computer.
  3. Go to github.com. Create an account and login or just login if you already have an account.
  4. Complete the following two GitHub tutorials: Set Up Git (Skip Password Caching), Create A Repo. By then end of the tutorials, you should have a command line interface (Terminal or Git Bash) open and should be inside the ~/Hello-World directory.
  5. (Recommended but not required) Before you can start coding, you must learn the language javascript. Complete the Codeacademy Javascript Tutorial. This step will take hours but you will have learned an entire programming language at the end of it. Plus, you will know what functions, for loops, while loops, control flow, data structures, and objects are. There is no point in me creating another tutorial on programming basics when so many exist like Khan Academy, Code HS, and Scratch. For our purposes, I think the best is Codeacademy so that is why I am recommending it.
  6. Now that you have learned javascript, go to Sublime Text. Download and install the latest version of Sublime Text for your computer.
  7. Open the Sublime Text application and press File->Open. Find the ~/Hello-World directory and open the entire thing with Sublime Text (Yes you can open entire directories with Sublime Text).
  8. Right Click (Control Click for Mac) on Hello-World and create a new file called "package.json". Add the following to package.json and then save it.
    {
     "name": "app",
     "description": "app",
     "version": "0.0.1",
     "private": true,
     "dependencies": 
     {
      "express": "3.2.0",
      "jade": "*",
      "stylus": "*",
      "nib": "*",
      "mongodb": "*",
      "mongoose": "*",
      "validator": "*",
      "express-mailer": "*"
     }
    }
  9. In your command line interface execute npm install . This installs all the dependencies that we will need in our effort. A dependency is a package (also called a module) of software that is downloaded and installed into your node_modules folder which should exist inside your Hello-World folder.
    • The "name", "description", "version", and "private" fields inform the nodejs framework that the name, description, version, and privacy settings of the app we are building are "app", "app", "0.0.1", and true (meaning private).
    • The "dependencies" field informs the nodejs framework that we need some software built by others and available on GitHub.
    • We need version "3.2.0" of the "express" framework, which essentially is a layer of software over nodejs that completes some of the intricacies of server building.
    • We need "jade" which is an engine that allows us to write a simplified form of html. (The markup language used to write the content of a webpage. "A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea evolved from the 'marking up' of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. In digital media this 'blue pencil instruction text' was replaced by tags, that is, instructions are expressed directly by tags or 'instruction text encapsulated by tags'" (Wikipedia 2013). If you right click on this page and you click "view source", you will see the html behind the current page. The browser converts the html to the formatted page you see.) The jade engine converts the simplified html into real html (the kind of code you saw by viewing source). To see an example of html code being converted to jade, visit this Html To Jade Converter. The "*"  in "jade": "*" specifies that we want the latest version of jade from GitHub.
    • In order to support the express framework, we need to install a package called "stylus" which does what jade does for CSS. CSS is a "style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML" (Wikipedia 2013). Stylus basically takes simplified CSS code and converts it to real CSS code.
    • The package "nib" helps stylus with web graphics.
    • The package "mongodb" sets up a database on our server. A database is "a structured set of data held in a computer, esp. one that is accessible in various ways" (Oxford English Dictionary 2013).
    • The package "mongoose" provides "elegant mongodb object modeling for nodejs" (mongoosejs.com). You should have learned what objects are in the Code Academy Tutorial.
    • The package "validator" is a service that parses emails and checks whether they are valid using regular expressions which you can learn about on wikipedia.
    • The package "express-mailer" is a services that allows our express nodejs server to send emails with ease.
  10. (Recommended but not required) Finally download Bootstrap by executing git clone git://github.com/twitter/bootstrap.git in the command line inside the Hello-World folder. Bootstrap is a front-end framework. Essentially, it is a bunch of software that uses its own CSS code to style your HTML code for you.
  11. As you may have inferred, HTML and CSS are extremely important for building websites. In fact they are so important that you should stop all you are doing right now to complete the Codeacademy HTML and CSS Tutorial. This step will take hours but you will have learned everything about building static front-end web pages by the end of it.
  12. Right Click (Control Click for Mac) on the bootstrap folder and rename it "public" to mark it as a folder that is public. We will learn more about what public means shortly.
  13. Right Click (Control Click for Mac) on Hello-World and create a new folder called "views". This is where we will put all the jade views for our website. Download the head, index, navbar, script-load, and side-navbar jade files and place them in the views directory.
    • The "head" file represents the head of the html page for every page on our website. It includes the title, meta tags, style sheet inclusions, etc.
    • The "index" file is the index or home page of the website.
    • The "navbar" is of course the html for the navbar.
    • The "script-load" is a chunk of calls to include bootstrap's custom javascript modules.
    • The "side-navbar" is simple html to produce the side navigation display.
  14. Right Click (Control Click for Mac) on Hello-World and create a new file called "app.js". Add the following to app.js and then save it. Then execute node app.js in the command line to start the server.
    // init module usage
    var express = require('express')
    var stylus = require('stylus')
    var nib = require('nib')
    var check = require('validator').check,
        sanitize = require('validator').sanitize
    
    // init db and app
    var app = express()
    
    // init jade compiler
    function compile(str, path) {
     return stylus(str)
     .set('filename', path)
     .use(nib())
    }
    
    // init views
    app.set('views', __dirname + '/views')
    app.set('view engine', 'jade')
    app.use(express.logger('dev'))
    app.use(stylus.middleware({ 
     src: __dirname + 'public',
     compile: compile
    }))
    
    app.configure('development', function(){
     app.use(express.errorHandler())
     app.locals.pretty = true
    })
    
    // init static public directory
    app.use(express.static(__dirname + '/public'))
    
    // render pages
     app.get('/', function(req, res){
     res.render('index', {title: 'hello world'})
    })
    
    // listen on port
    app.listen(7777)
                  
    • Every server is just a program that accepts requests for URI's (the "gobidasu" in "facebook.com/gobidasu" or the "visionmedia/jade" in "https://github.com/visionmedia/jade") and responds with the website content. This "app.js" we have just saved is that program. "app.js" is the server.
    • The code under the "init module usage" comment tells that our server needs to employ the express, stylus, nib, and validator modules. We import the validator module's check and sanitize objects separately, the former of which checks whether an email address is valid and the latter of which cleans up email strings.
    • The code under "init app" essentially creates an app object as an instance of the express class (note the use of the express class constructor). In this way, the express framework has done much of the heavy lifting in setting up a server.
    • The code under "init views" has the app initialize the primary directory for views (front-end html code) to be 'views' and the view engine to be Jade (meaning the views directory will actually hold jade files which will be compiled to html using the jade engine). We declare to the express logger that we are working on a development (dev) version. We tell it to make the 'public' folder a static public folder meaning everything in it is accessible to the public and we don't have to specify using app.get how to render that url. One simply goes to "localhost:7777/[Directory Name inside public folder]/[file]" to view the public file. For instance visit "http://localhost:7777public/docs/index.html". Finally, the app.configure command tells the app to use the express errorHandler and set the app.locals.pretty boolean to true.
    • The code under "init static public directory" completes the declaration of the public folder as a public static folder.
    • The code under "render pages" tells the app how to map a URI request to a view. For instance, a request for the home page (the URI "/") should be mapped to the view called index.
    • The code under "listen on port" tells the app to respond to requests on port 7777. Now, go to "localhost:7777/" in in your browser to view the website.