Ten minutes to create a node.js based album on BlueMix (Part Two)

This part I will step by step to show how to write my album application.You can download my code from here.If you don;t have jazz hub account,pls register one and use your IBM id to login on .

1.Create a project album use the express project as the template to generate project structure.Also create image folder under the public folder.Create a car folder under the image folder.
2.In order to control my UI easily,I decide to use the bootstrap.Download it from the official site.Unzip the package and put all the css,js folder including files under the public folder. You should see the below structure generated.

3.Modify layout.jade under the views folder.You can copy the below code to this file.

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
        link(rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css")
        link(rel="stylesheet" href="/stylesheets/bootstrap-image-gallery.min.css")
    body(style='background:black')
        div(class="navbar navbar-inverse navbar-fixed-top" )
            div(class='container')
                div(class='navbar-header')
                        span(class='sr-only')='Toggle navigation'
                        span(class='icon-bar')
                        span(class='icon-bar')
                        span(class='icon-bar')
                    a(class='navbar-brand' href='#')='My tesla'
                div(class='collapse navbar-collapse' style='height: 1px;')                
       

        block content
        script(src='http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js')
        script(src='/bootstrap.js')
        script(src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js")
        script(src="/bootstrap-image-gallery.min.js")

4.Change index.js under the routes folder.Copy below code to this file.

var fs = require('fs');
exports.index = function(req, res){
 
 var files = fs.readdirSync('public/images/car');
  res.render('index', { title: 'My  car',imgs:files });
};

5.Change index.jade under the views folder.Copy below code to this file

extends layout
block content
    div(style='height:210px')
        for img in imgs
            a(href='images/car/'+img title=img data-gallery)
                img(src='images/baby/'+img  class="img-thumbnail" style='width:140px;height:140px;margin:5px' )

6.put some car pictures in the car folders.Run the app.js in the eclipse and open the browser and use http://localhost:3000 to visit my application,you can see my album is generated.

7.In order to deploy to the BlueMix,I need to create two files manifest.yml,package.json.

a)manifest.yml it defines the deploy settings on BlueMix.

applications:
- host: node-album
  disk: 1024M
  name: node-album
  command: node app.js
  path: .
  domain: ng.bluemix.net
  instances: 1
  memory: 128M

Notes:

If you don;t know how to write the manifest.yml,you can create a sample node.js application on the BlueMix, download the sample package,it will ship this file.

b)package.json It defines the node dependencies module,so when you deploy node.js application,the buildpack will automatic download the node module from this file.

{

  "name": "NodeAlbum",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node app.js"

  },

   "dependencies": {

    "express": "3.2.6",

    "jade": "*"

  }

}

8. Deploy to the BlueMix
After review the project,I found some files/folder are  not necessary when you  deploy to the BlueMix.Like .settings,node_modules. We can delete these two folders.

Next we can use below cf command to deploy it on the BlueMix.

cf api https://api.ng.bluemix.net

After login into the bluemix,you can directly use cf push command.Pls make sure the application host name is not occupied by others.

cf push

Now our node.js demo is completed deployed on to the BlueMix.