Framework for a Facebook Application on AngularJS using RequireJS, Yeoman, Grunt, and Bower.

Added by: Sam Deering





Stars: 2

Watchers: 2

Forks: 0

Module Description

#AngularJS Facebook Integration

Framework for a Facebook Application on AngularJS, Yeoman, Grunt, and Bower. This application is a test application that will integrate basic Facebook Graph API calls, as a service, into AngularJS.

Installation of Angular: Instructions for Mac/Linux

  1. Install Yeoman, Grunt and Bower in user root directory:

     sudo npm install -g yo grunt-cli bower
  2. Install AngularJS generator in user root directory:

     npm install -g generator-angular
  3. In empty project folder, install the template:

     yo angular
  4. Change

       "directory": "app/bower_components",
       "json": "bower.json" // Add this line
  1. Install angular bootstrap in the project folder:

     bower install angular-bootstrap --save
  1. Will need to update git if possible - do the following in the terminal in user root:

     git clone git:// 
     cd git 
     sudo make prefix=/usr install install-doc install-html install-info
  2. For Grunt to work properly, follow the first steps then in the user root:

     npm install grunt --save-dev
  3. After this, you'll need to install compass and sass. You'll also need to update Ruby if needed with update --system command. In the user root:

     npm install grunt-contrib-compass --save-dev
     gem update --system && gem install compass
  4. For the last step, you'll need to install karma in the PROJECT FILE: cd ~/project:

     npm install grunt-karma --save-dev

Other instructions for Grunt can be found at:

To configure AngularJS for CORS:

      .config(['$httpProvider', function($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];

Deploying App to Heroku: Instructions for Mac/Linux

  1. Install gzippo (serve gzip assets) and express (simple Node application framework) into the PROJECT folder:

     npm install gzippo express --save
  2. Create a server file named web.js into the root PROJECT folder:

     var gzippo = require('gzippo');
     var express = require('express');
     var app = express();
     app.use(gzippo.staticGzip("" + __dirname + "/dist"));
     app.listen(process.env.PORT || 5000);
  3. Have grunt build the distribution app from the original development app:

     grunt build
  4. Change .gitignore file and take out dist (Heroku needs this to deploy the app).

  5. Add Procfile to the root PROJECT folder and insert this:

     web: node web.js

Open a new Terminal window and login to Heroku in your PROJECT directory:

  1. Turn your project into a git repo:

     git init
  2. Create a heroku app in you project root (where "sample-project" is the name of your app).

     heroku create sample-project
  3. Commit your code and deploy it to Heroku

     git add .
     git commit -m "Initial Commit"
     git push heroku master
  4. Add worker to you app:

     heroku ps:scale web=1
  5. Now open your app and check it out!

     heroku open

Module stats last updated: 2015-06-08 00:34:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!