/angular_seed

Primary LanguageJavaScriptMIT LicenseMIT

Angular Seed App

TOC

Description

This is a seed app for AngularJs applications.

Technologies used:

  1. HTML5
  2. JADE
  3. ES6 (ecmascript 2015)
  4. FlowType
  5. SASS
  6. Gulp
  7. Karma/Jasmine
  8. Protractor

Style Guides

Coding

Design

3rd Party Docs

Coding
DevOps

Development

Branches and Builds

There are two main builds for this project: Development and Production. Each of these builds is produced from a branch of the same name (ex. master/dev === the DEV build). Theses are the only branches that get deployed.

Deployment

  1. Setup project (follow below steps).
  2. Make a new Branch named after the project and issue number.
    1. Example: Issue #3245 in red2678/angular_seed Main and named "Fix login button" would be: "asafe-3245-fix-login-button".
  3. Make Changes and include a description.
  4. Create a pull request and get it approved.
  5. Merge pull request into DEV.
  6. Merge pull request into MASTER.

IDE Configuration

IntelliJ IDEA 15.x
Configuring FlowType
  1. Open settings
    1. Click on IntelliJ IDEA from the top menu.
    2. Click Preferences.
    3. In the settings window on the left-hand menu, click Languages and Frameworks.
    4. Click Javascript.
    5. In the right-hand pane, from the dropdown labeled JavaScript Language Version select flow.
    6. View Image
Configuring Gulp Tasks
The NPM and Gulp Toolbars

Project Configuration - WINDOWS

Windows instructions coming soon!!

Project Configuration - MAC

The below instructions are for Macintosh.

1. Install Ruby
  1. Ruby comes pre-installed on most Mac distributions, use the below steps only if necessary.
    1. Download and run the installer for your system.
    2. Recommended, use the Ruby Version Manager (RVM) to manage Ruby versions on your machine.
2. Install NodeJs and FlowType with Homebrew
  1. Working from your user root cd ~/.
  2. Install Homebrew.
    1. ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. Install NodeJs 4.x LTS and FlowType with Homebrew.
    1. brew install node4-lts
      • If the above command fails, try brew install homebrew/versions/node4-lts
    2. brew install flow
      • For instructions on configuring FlowType see here.
  4. Install a few NodeJs global dependencies. NOTE you do not need SUDO here, thanks Homebrew ;)
    1. npm install -g gulp
    2. npm install -g bower
    3. npm install -g babel-cli
    4. npm install -g npm-check-updates
3. Install Bundler
  1. Working from your user root cd ~/.
  2. gem install bundler
4. Install Git
  1. Go to main Git website https://git-scm.com/, and download the installer, then run it.
    • Note: Based on your operating system, the download link on the home page will serve up the appropriate installer.
5. Cloning Repo

This will determine your your project root.

Using the Git CLI
  1. Open a Terminal and navigate to where you wish to store the project (the below is an example, using SSH).
  2. cd ~/workspaces
  3. git clone https://github.com/red2678/angular_seed.git
  4. cd angular_seed
Using SourceTree
  1. Link to sub page with screen shots :: needs to be done
6. Init Project
  1. Working from your project root run npm run initapp
7. Start Developing

To start developing, execute the gulp default task.

  1. The gulp default task will do several things
    1. Builds project from src/main-site/ for the dev environment to builds/dev/main-site.
    2. Runs site in web browser with gulp-connect with live reload support.
    3. Runs gulp watchers.
  2. Open http://localhost:60431 in your web browser.

See the Gulp section for more detailed information about the Gulp tasks for this project.

Third-party Libraries

Third-party libraries are downloaded and managed by bower, npm and bundler. They should not be committed into the repository.

  • npm initapp will automatically download any third-party libraries.
  • You can use ncu to check node dependencies and ncu -m to check bower dependencies.
    • WARNING If you run suggested commands, output by the above command, ncu -u or ncu -m -u this updates the actual bower.json or package.json with the latest version number for the packages. Only do this if you really mean it :)
  • You can use bundle outdated to check Ruby Gem dependencies via bundler.

Unit and e2e Testing

We are using Jasmine/Karma for unit and Protractor for e2e.

  • gulp protractor
  • gulp jsTest

Gulp

Config

We are using gConfig as a configuration helper.

Grouped Tasks

Below are the "main" or grouped tasks that you will use primarily.

default

build

watch

gulp watch - Sets up Gulp watcher tasks for the source files, see gulpfile.babel.js and specifically the watch task for more information on what is being watched.

Individual Tasks

Build Tasks

connect
connectTest
copy
createArchive
loadConfig

Loads the Gulp configuration from src/main-site/config/gulp.conf.js.

produceArtifacts
turnOffLiveReload

Clean Tasks

clean

Cleans the current build folder

clean:all

Cleans all build folders

JS Tasks

babel

Compiles all *.es6 files

js

Takes complied JS, uglfies and concats it into main.min.js.

jsDoc
jsLint

Testing Tasks

jsTest
protractor
test

Vendor Tasks

fonts
vendorCss
vendorImg
vendorJs
vendorJsHead

HTML Tasks

html
jade
partials

SASS Tasks

sass

Main SASS to CSS processing task.