Create a simple GitHub Profile app purely in JavaScript that grabs data from the GitHub API in order to display a specified users avatar, number of followers and number of repos.
- AngularJS (In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications)
- Tested using Karma (a JavaScript test-runner built with Node.js, and meant for unit testing)
- E2E (end-to-end) tested using Protractor (end-to-end test framework for AngularJS applications; runs tests against your application running in a real browser, interacting with it as a user would; a Node.js programme) using a Selenium Server (automates browsers)
- Install Node (if not already):
$ brew install node
- Create
package.json
with$ npm init
(return for all); gives info to npm to identify project and handle its dependencies node_modules
directory is created when first node package is installed, i.e.:$ npm install jasmine-node --save-dev
(--save-dev
switch adds node package directory innode_modules
directory and lists it inpackage.json
file as a development-only dependency; removing-dev
would list simply as a dependency)- Add
node_modules
folder to.gitignore
file - If pulling project from separate repo, run
$ npm install
from root (a labundle
for a Ruby project) - Ensure okay and check for version number:
$ node -v
- Package manager similar to npm but optimized for front-end; can be used in conjunction with Sinatra, Node or Rails to manage front-end dependencies
- Install bower (if not already):
$ npm install -g bower
(made global with-g
switch) - Ensure okay and check for version number:
$ bower -v
- In project directory
$ npm install --save-dev bower
- Create
bower.json
with$ bower init
(return for all) bower_components
directory is created when first package is installed, i.e.:$ bower install jquery --save
(--save
switch adds package directory inbower_components
directory and lists it inbower.json
file as a dependency;--save-dev
would list it as a development-only dependency)- Add
bower_components
folder to.gitignore
file - If pulling project from separate repo, run
$ bower install
from root (a labundle
for a Ruby project)
$ bower install jquery --save
$ bower install bootstrap --save
$ bower install angular --save
$ bower install angular-resource --save
- Acquire a GitHub access token (click 'Generate new token')
- Create new file in root directory called
accessToken.js
and include access token here:var accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$ open index.html
$ bower install angular-mocks --save-dev
$ bower install angular-route --save-dev
$ npm install karma --save-dev
$ npm install karma-jasmine karma-chrome-launcher karma-phantomjs-launcher --save-dev
$ npm install -g karma-cli
- Create file:
test/karma.conf.js
with contents as per this codebase
$ karma start test/karma.conf.js
- Install Node (if not already):
$ brew install node
and check it is > v0.10.0 using$ node -v
- Ensure Java Development Kit (JDK) is installed (required to run Selenium Server); check by running
java -version
.
- Install Protractor globally (if not already):
$ npm install -g protractor
and ensure installation with$ protractor -v
- Download binaries:
$ webdriver-manager update
- Run server:
$ webdriver-manager start
(and view server status info at: http://localhost:4444/wd/hub) (must be running whilst running Protractor tests) - Add development dependencies within project:
$ npm install --save-dev protractor
- Create server for app:
$ npm install --save http-server
; then$ npm install http-server -g
(if not already installed) - Run server:
$ http-server
(must be running whilst running Protractor tests)
test/e2e/conf.js
- To run on Firefox:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['githubProfileFeature.js'],
capabilities: {
browserName: 'firefox'
}
}
- To run on both Firefox and Chrome:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['githubProfileFeature.js'],
multiCapabilities: [{
browserName: 'firefox'
}, {
browserName: 'chrome'
}]
}
$ webdriver-manager start
$ http-server
or$ node server.js
(Express server) or$ ruby server.rb
/$ rackup
(Sinatra server)$ protractor test/e2e/conf.js
Running site on Express server:
$ npm install express --save
- Save Express in the dependencies list in
package.json
:"express": "^4.13.3"
- Create
server.js
file in root directory with contents as per this codebase - Create new folder
public
in root and relocatejs
,style
andbower_components
directories into it (ensurekarma.conf.js
file amends routes forbower_components
accordingly and create.bowerrc
in root with following content:{"directory" : "public/bower_components"}
) test/e2e/toDoListFeature.js
will need to change port from 8080 to that required by Express: 3000package.json
file: "scripts": "start" will now neednode server.js
- NB: Running site without a server will no longer work once local server has been established
- Run server:
$ node server.js
- View site at: http://localhost:3000
Running site on Sinatra server:
- Create
Gemfile
file in root directory:
source 'https://rubygems.org'
gem 'sinatra'
-
Install gem:
$ bundle
-
Create
server.rb
file in root directory:
require 'sinatra'
get '/' do
send_file 'index.html'
end
set :public_folder, 'public'
- Create
config.ru
file in root directory:
require './server'
run Sinatra::Application
test/e2e/githubProfileFeature.js
will need to change port from 8080 to that required by Sinatra: 9292 or 4567 (depending on which method below is used)- Run server with Rackup:
$ rackup
(view site at: http://localhost:9292) - Or Rackup via specific port (to be consistent with Sinatra default port):
$ rackup -p 4567
(view site at: http://localhost:4567) - Or with Sinatra
$ ruby server.rb
(view site at: http://localhost:4567)
Deploying to Heroku
$ heroku create
$ git push heroku master
- Fix Karma tests:
js/searchFactory.js
fails tests (currently commented out) becausemockSearch.js
only expects one GET request, i.e. error ingitUserSearchController.spec.js
:Error: Unexpected request: GET https://api.github.com/users/andygout?access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
- Consider how to keep accessToken referenced as Heroku config variable: Stack Overflow: How to access local ENV variables in angular js / Frontliners-API by Ptolemy Barnes - suggests making API call directly from server rather than being sent back to client and made from there (where they will have access to it)
GitHub - Makers Academy: GitHub Profiles (Further JavaScript)
AngularJS: Official tutorial (PhoneCat Tutorial App)
AngularJS: 10,000 word tutorial
Protractor: Locators (for targeting DOM elements)
Protractor: ElementArrayFinder (has methods each
, map
, filter
and reduce
which are analogous to JavaScript Array methods)
Protractor: Table of Contents (Setup/Tests/Reference)
Protractor: referenceConf.js (re. options for test/e2e/conf.js)
Express: Getting Started - Installing
Stack Overflow: Heroku + node.js error (Web process failed to bind to $PORT within 60 seconds of launch) (changes required in server.js
to allow Heroku to assign app its own specified port, rather than one listed)