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;

You can check out the the Live Demo

I created opfcli NPM 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

$sudo npm install opfcli -g

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

$opfcli app productInventory

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

$cd productInventory

$sudo 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 started with foreman; This will run in http://localhost:9294

I built opfcli 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;

opfcli 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;

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 opfcli build to create static minified and compressed 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 opfcli 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

and OPF Frontend are beta and may still change on its route to 1.0

Deploying to Heroku

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

opfcli build

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 to Production in Heroku, so that opfcli asset 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

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