OPF is an Single Page App Generator with SpineJS and Twitter Bootstrap; It includes a development server that compiles .coffee and .less files each request automatically; NodeJS Server uses ExpressJS and has build-in Jade Support with a Routes Controller

SpineJS and Twitter Bootstrap work real well when used together to build state of the art mobile and web apps; They both have improved the quality of my apps and speed at which I create them;

This guide assumes that you have NodeJS installed in your system;

I created OPF.APP module for NODEJS so that we could get started in a few command lines

How to Get started

Type the following commands in the Terminal

$npm install opf.app -g

This will use NPM to install Opf.App Generator; An Scaffold Generator that will set you up to start developing in seconds.

$opf app productInventory

Run the App generator creating the Web App including NodeJS server, folder structure and Twitter Bootstrap Integration

$cd productInventory

$npm install .

"cd" into directory, then NPM will automatically download dependencies specified in package.json into ./node_modules folder

$node start.js

Start NodeJS Server, can also be used with foreman; This will run in http://localhost:5000

I built Opf.App to expedite the creating of projects using Spine and Twitter Bootstrap; I use it myself so that I can get started working or prototyping in seconds;

Opf.app will create the following file structure

OPF FrontEnd

App Folder

The Single Page App, it contains Models, Views and Controllers; Along with SpineJS Extensions for Ajax, Local Storage.

index.coffee is the Main Point of Entry and its initialized in index.html in /public

Bootstrap JS Javascript Components are included in app/lib/setup.coffee

CSS Folder

The Styles of the App in LESS, including Twitter Bootstrap

index.less is the main entry point referencing other .less files; ( index.styl must be present )

Public Folder

The public folder is for Assets like images and fonts;

index.html is the main entry point in this simple OPF Scenario

Server Folder

The Node JS Server for Single Page Apps, extendible including JADE and other components for Complex OPF Scenarios

When in Development, OPF dynamically renders /app files into application.js and /css files into applicacion.css

Before deploying to production run the file ./build.sh to create static versions of .js and .css

Working in Development

When working in development we want to dynamically render .less and .coffee so that we can see changes when we refresh the page;

I based OPF.app on Alex Maccaw Spine.app and HEM Server with two large modifications; Including Twitter Bootstrap(LESS) and making the NodeJS extendible using the Express Framework

Simple Version

$node start.js

This command will start a server and render all files dynamically, its perfectly fine to get started and do some prototypes

Production Version

foreman start

This command requires foreman and is based on Heroku Deployments; Its main advantage is using ENV Variables, so you don't have to hardcode API,Auth and Vulnerable KEYS in Javascript

OPF.APP and OPF Frontend are beta, and there is a BUG; When you make an error in a .less file the process stops and must be restarted manually

Deploying to Heroku

Everything in Spine and OPF is made so that development and deployment are painless;

$chmod 777 ./build.sh

This will allow you system to run the script, read the code in the file before running the script

$./build.sh

This will create application.js and application.css static files and place them on the /public folder

heroku config:add NODE_ENV=production

Make sure you have set the ENV['Production'] variable in Heroku, so that OPF-HEM server will not run and the deployed app uses the static files

git push heroku master

Deploy your master branch to heroku and watch it run on your favorite port

If you have any problems run heroku logs to figure out what's going on