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