tesla

Tesla.js (beta)

Tesla.js is a boilerplate node.js framework, with some basic MVC features. It's still a work in progress and will be at least few more weeks before it's feature complete.

Contents

#####Prerequisites

#####Included Packages

#####Installation

#####Quick Start

#####Configuration

• App Settings
• Environmental Settings

#####Models, Controllers & Views, Oh My!

• Routing
• Controllers
• Views
• Models

#####Troubleshooting

#####Heroku Quick Deployment

Prerequisites

• Node.js - Download and Install Node.js. You can also follow this gist for a quick and easy way to install Node.js and npm
• MongoDB - Download and Install MongoDB - Make sure it's running on the default port (27017).

Included Packages

NPM modules in the package.json file.

• Express - Sinatra inspired web development framework
• Mongoose - elegant mongodb object modeling for node.js
• Passport - Simple, unobtrusive authentication for Node.js.
• Jade - robust, elegant, feature rich template engine for nodejs
• Stylus - Robust, expressive, and feature-rich CSS superset
• Superagent - Elegant & feature rich browser / node HTTP with a fluent API
• MD5 - native js function for hashing messages with MD5

Bower modules in the bower.json file.

• AngularJS - HTML enhanced for web apps!
• Zepto.js - Minimalist JavaScript library for modern browsers, with a jQuery-compatible API
• jQuery - jQuery JavaScript Library

Installation

$ npm install -g tesla-cli

Quick Start

Once Tesla is installed, simply run the following command anytime you want to create a new app:

$ tesla app-name

This will create a new app with the name "app-name". Next, switch into your new apps directory:

$ cd app-name

Than install dependencies:

$ npm install

And finally start the server:

$ grunt

Once the server has started, simply point your browser to:

http://localhost:3000

Options

Usage: tesla [options]

Options:

  -V, --version       output the version number
  -e, --ejs           add ejs engine support (defaults to jade)
  -J, --jshtml        add jshtml engine support (defaults to jade)
  -H, --hogan         add hogan.js engine support (defaults to jade)
  -c, --css   add stylesheet  support (less|sass|stylus) (defaults to plain css)
  -f, --force         force on non-empty directory

For example, if you want to generate an application called "foobar" with Jade & Stylus support you would simply execute:

$ tesla --css stylus foobar

Or to generate an application with EJS & SASS support:

$ tesla --css sass --ejs foobar

Option 2: Clone The Repo

The second option is to simply clone the repo and use it as a barebones boilerplate to start your next project.

$ git clone [e-mail]:teslajs/tesla.js.git

This is the most light-weight option and gives you the most control over how you set your project up.

However, this step requires a few additional steps to configure correctly:

1. Set your app name

Open app/config/config.js and set the "app.site.name" to your app name. Open package.json and set the "name" to your app name.

2. Set your HTML templating & CSS processing engines

Open app/config/config.js and set your engines:

app.config = {

    engines : {
        html: "jade", // options: [jade|ejs|haml|hjs|jshtml]
        css: "stylus", // options: [stylus|sass|less]
    },

}

Install NPM modules

// Install your selected HTML engine
$ npm install jade // for Jade
$ npm install ejs // for EJS
$ npm install jshtml // for JSHTML
$ npm install express-hogan // for HJS (Hogan)

// Install your selected CSS engine
$ npm install less // for LESS
$ npm install sass // for SASS
$ npm install stylus // for STYLUS

Next, go into the app folder and rename the view folder you want to use to "views". For example if you're using Jade, rename "views.jade" to "views". Delete the rest.

Finally, do the same for the css directory. Go into the public folder and rename the css directory you want to use. To use Stylus, rename "stylus.css" to "css" and delete the rest of the folders. If you don't want to use a css processor, keep the current "css" folder and delete the rest.

3. Install Dependencies

Now that everything is configured, cd into your app directory and run the following command:

$ npm install

Start the Server

We recommend using Grunt to start the server:

$ grunt

This will watch for changes to any of your files and automatically restart then server when necesary. If you choose not not using Grunt, you can run the app like so:

$ node server

With this method you have to manually stop and start the server any time you make changes.

Once the server has started, simply point your browser to:

http://localhost:3000

Configuration

All configuration is specified in the config folder, particularly the config.js file and the env files. Here you will need to specify your application name, database name, and any other settings you would like to customize.

Default config file: config.js

Most default settings can be set & updated here:

app.site = {
    name : "Tesla.js", // the name of you app
}

app.config = {
    port : 3000, // port to run the server on

    prettify : {
        html : true, // whether to pretify html
    },

    engines : {
        html: "jade", // specify view engine - options: jade, ejs, haml, hjs (hogan)
        css: "stylus", // specify css processor - options: stylus, sass, less
    },
    root : rootPath,

    db : {
        url : "mongodb://localhost/db-name" // url to database
    },

    jsonp : true, // allow jsonp requests
    secret : 'MYAPPSECRET',
    protocol : 'http://',
    autoLoad : false, // whether to autoload controllers & models
}



// some default meta setting for head
app.site.meta = {
    description : '',
    keywords : '',
    viewport : 'width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0',
    encoding : "utf-8"
}

Environmental Settings

To run with a different environment, just specify NODE_ENV as you call grunt:

$ NODE_ENV=test grunt

If you are using node instead of grunt, it is very similar:

$ NODE_ENV=test node server

Example config file for "development" environment: config/env/development.js

// global settings
app.site.domain = "localhost"; // domain the site is running on
app.site.environment = "Development"; // name of environment
app.site.url = app.config.protocol + app.site.domain + ':'  + app.config.port + '/'; // base url

// directories location to use for dynamic file linking
app.site.dir = {
    css : app.site.url + "css/",
    img : app.site.url + "img/",
    lib : app.site.url + "lib/",
    js : app.site.url + "js/"
};

NOTE: Running Node.js applications in the production environment enables caching, which is disabled by default in all other environments.

Models, Controllers & Views, Oh My!

Routing

Tesla comes with an automatic routing system which saves you the trouble of manually creating routes for your site. The routing is based on the following URI structure:

http://localhost:3000/controller/action

As an example, http://localhost:3000/home would load the following controller: app/controllers/home.js

Similarly, http://localhost:3000/foo/bar would load this controller: app/controllers/foo/bar.js

Autoloading

The exeption to this rule is if you set "autoLoad: true" in config/config.js. In this case you only need to create a model and a view, as Tesla will attempt to automatically load the model and the view using the app/controllers/auto.js controller.

With autoload, going to http://localhost:3333/hello/world will attempt to load the following files:

*Controller: app/controllers/auto.js *Model: app/models/hello.js *View: app/views/hello/world.jade

Autoload assumes a model with the name of the controller, and will try to find a record whose "name" field matches the action. Using http://localhost:3000/articles/super-awesome-fun-time as an example, autoload load use a model called "articles" and try to find a record with the name "super-awesome-fun-time":

articles.findOne({name: "super-awesome-fun-time"})

With autoloading, any data returned from the model will be sent to the view via the "data" variable. If no data is returned we assume the page does not exist and will throw a 404 error. Also worth noting, autoload expects to find a model to provide data to the view. If you forget to create a model with the correct name, you will get a 404 error when loading the page. If you don't want or need a model to provide data to your controller, or want to use a different URI structure, don't use autoload.

Controllers

If you are not using autoload, you will need to create your own controllers, which couldn't be easier! For example, if you want to create the page http://localhost:3000/help, simply create a controller with the same name: app/controllers/help.

Then, add the following code:

exports.render = function(app) {

    app.res.render('help', {
        site: app.site
    });

};

The above code is pretty simple, it simply loads the view "app/views/help.jade" and passes it a "site" variable.

For a slightly for complex example, lets say you want to create a blog with the following uri structure: http://localhost:3000/article/read?id=12345

Let's assume also you also want use an "article" model to load an article with the id "12345". Create the file "app/controllers/article/read.js" with the following code:

var mongoose = require('mongoose'),
    Articles = mongoose.model( 'Article' ),

exports.render = function(app) {

    var id = req.query('id')

    Articles.findOne({_id: ud}).exec(function(err, article) {

        // IF WE GET AN ERROR
        if (err) {
            app.res.render('error', {
                status: 500
            });

        // IF NO DATA WAS RETURNED, THROW A 404
        } else if ( article === null) {
            app.res.status(404).render('404', {
                pageTitle : app.site.name + ' - Not Found',
                url: app.req.originalUrl,
                error: 'Not found',
                site: app.site
            });

        // IF NO PROBLEMS, RENDER PAGE
        } else {

            // LOAD THE ARTICLE/READ VIEW & PASS DATA FROM THE MODEL
            app.res.render('article/read', {
                article : article,
                site: app.site
            });

        }

        }

    });

};

Views

Views can use Jade (default), Haml, Handlebars or EJS. See the appropriate documentation for you chosen templating language for more info on how to use it.

Models

For models, Tesla uses Mongoose to connect to a MongoDB server. Documentation on working with Mongoos can be found here: http://mongoosejs.com/docs/guide.html

Troubleshooting

During install some of you may encounter some issues, most of this issues can be solved by one of the following tips. If you went through all this and still can't solve the issue, feel free to contact me(Amos), via the repository issue tracker or the links provided below.

Update NPM, Bower or Grunt

Sometimes you may find there is a weird error during install like npm's Error: ENOENT, usually updating those tools to the latest version solves the issue.

Updating NPM:

$ npm update -g npm

Updating Grunt:

$ npm update -g grunt-cli

Updating Bower:

$ npm update -g bower

Cleaning NPM and Bower cache

NPM and Bower has a caching system for holding packages that you already installed. We found that often cleaning the cache solves some troubles this system creates.

NPM Clean Cache:

$ npm cache clean

Bower Clean Cache:

$ bower cache clean

Heroku Quick Deployment

Before you start make sure you have heroku toolbelt installed and an accessible mongo db instance - you can try mongohq which have an easy setup )

git init
git add .
git commit -m "initial version"
heroku apps:create
git push heroku master

Credits

Inspired by the MEAN Stack by Amos Haviv and Express by TJ Holowaychuk