OPF Framework CLI

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

Type the following commands in the Terminal

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

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

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

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

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

The Styles of the App in LESS, including Twitter Bootstrap

index.less is the main entry point referencing other .less files;

The public folder is for Assets like images and fonts;

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

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

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

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

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

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

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

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

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