wbpjs

Node.js web boilerplate framework to make friendly web apps

npm install wbpjs
116 downloads in the last week
232 downloads in the last month

What's wbpjs?

Wbpjs Logo

Web Boilerplate JS is a full stack web framework for nodejs.

Its goal is to make friendly webapps building easy, without falling in a "quick & dirty" style.

It is based on a plugin system to keep the solution strong and simple, whatever you need : simple http server, crud app with mongodb, multi server system, restful api, web sockets, or mobile site.

Simply configure your app, and run it !

Features

  • mvc : controllers / models and views
  • rendering powered by ejs
  • mobile browser rendering
  • restful support with xml, json, txt rendering
  • lesscss support : compilation at bootstrap
  • i18n integration
  • persistence with mongoose (or mock for test purpose)
  • crud controller and dao helpers

Installation

The recommended way is through the excellent NPM:

$ npm install -g wbpjs

Quick start

The simplest way to play with wbpjs is to generate a simple 'hello' web application :

Create the app:

$ wbpjs ./hello

Start the server:

$ cd ./hello
$ node app

Slow start

Hello webapp example in 7 steps :

  1. Create a new basedir webapp folder 'hello'
  2. Create a new file /hello/package.json :

    {
      "name": "hello",
      "version": "0.0.1",
      "dependencies": {
        "wbpjs": "*",
        "wbpjs-plugin-mvc":"*"
      }
    }
    
  3. Create a new file /hello/app.js :

    var wbp = require('wbpjs')
      , config = {
      plugins:{
        'mvc':{
          type:'mvc',
          config:{ locales:['en', 'fr'] }
        }
      }
    };
    wbp.start(config);
    
  4. Create a new controller file : /hello/controllers/main/index.js

    var wbp = require('wbpjs');
    
    module.exports = {
      // index is a keyword meaning 'index of the site'
      // wbpjs builds the site routes based on keywords and controller module name
      // example of values :
      //   config options : route (overrides the default) / prefix (add a route prefix)
      //   simple ops : get/post/put/head (http methods)
      //   crud ops : list/show/new/create/edit/remove/update (matching a model)
      index:function (req, res) {
        wbp.render(res, function (type) { // rendering engine based on type of view (html)
          var view = wbp.getWebView(req, 'main/index', type); // get the real matching view path
          res.render(view, { // effective rendering based on ejs templating
            title:__('Welcome') // this is the model (M of MVC) computed by i18n
          });
        });
      }
    };
    
  5. Create the view : /hello/views/main/index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello - <%= title %></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
    </head>
    <body>
        <h2>Hello</h2>
            <h3><%= title %></h3> <!-- Access to model -->
    </body>
    </html>
    
  6. Create the less css file : /hello/lesscss/style.less

    html { // Less syntax rocks
        body {
            width: 400px;
            background-color: #fefefe;
            h2 { color: blue; }
        }
    }
    
  7. Run it :

     $ node app
    

Look at the demos for examples of simple webapps.

Some other useful examples powered by wbpjs :

Enjoy !

npm loves you