mwaylabs / generator-m-ionic

Advanced workflows and setup for building rock-solid Ionic apps

We moved on! This project is not longer maintained from our side.

It is still here for sake of completness.

Generator-M-Ionic

Development:

Why you need it

Note on Angular 2 & Ionic 2:

This Generator delivers highly advanced workflows for Angular 1 & Ionic 1 with the latest Cordova. If you are looking for a version for Angular 2 & Ionic 2, we're working on one but progress is slow for various reasons. Meanwhile, we are still solidly committed to maintaining and rolling updates for the Angular 1 & Ionic 1 stack. Everybody looking to get involved in either topic is very welcome!

Advanced workflows for building rock-solid Ionic apps: develop, prototype, test, build and deliver high quality apps with Yeoman, Gulp, Bower, Angular, Cordova and of course Ionic. All in one sexy generator.

Read more ...

What's in the box

Read more ...

Latest releases

• Component subgenerator: see here.
• Yarn integration: see here.
• Test setup improvements #489.
• Livereload for the device! Wohoo! See how it's done.
• Integrations into Ionic Cloud, Relution & Greenhouse.
• and many more ...

What's new

Ionic Blog Series - Great ride through everything Generator-M-Ionic has to offer:

Advanced workflows for building rock-solid Ionic Apps

• Part 1: Playground
• Part 2: Mountain
• Part 3: Orbit

Guides

Quick Start

• Quick Start for the experienced developer.
• Try the demo. Get a quick impression by cloning the sample project generated with the latest version of Generator-M-Ionic.

Setup

• Installation and Prerequisites
• Questions the generator will ask and what they mean

Basics

• Development Introduction
• File structure
• Sub-generators for adding new components.
• Git integration, see how it's done.
• Sass integration in our module concept.
• Bower component usage in our module concept.
• Ionic style source, change it from CSS to Sass or vice versa.

Quality

• ESLint code style checks and setting up your IDE/Editor.
• Testing with our testing setup.
• Husky hooks, automatically run linting and tests before you commit.

Advanced

• CORS & Proxying, how to cope with CORS issues.
• App Icons and splash screens, a simple setup or different sets for different builds - all is possible.
• Use Environments manage different API Endpoints and much more with just a single parameter.
• Gulp defaults, spare yourself some tedious typing on the command line.

Building & Continuous Integration

• Build Vars, inject vars into your app at build time.
• Programmatically change the config.xml, with gulp config an essential part for a successful continuous integration setup.
• Full-blown Continuous Integration Guide - putting it all together: environments, build vars and gulp config!
• Greenhouse & Relution Integration Guide - build and distribute your apps using these powerful cloud services

Ecosystems

• Greenhouse & Relution - build and distribute your apps using these powerful cloud services
• Ionic Cloud (beta) - a powerful suite of hybrid-focused mobile backend services and tools

Generator Insights

We've published 3 blog articles on our company blog delivering deep insights into the why and how of the generator:

• September 2015: Generator-M-Ionic and the search for the holy grail
  • rather technical comparison between the generator and similar tools as well as technical insights to the decisions and motivation behind the generator
• September 2015: Generator-M-Ionic: HTML5 mobile app development evolved
  • provides insight to the technology choices and ecosystem and the benefits of using the generator
• March 2015: Generator-M: the state of HTML5 mobile app development at M-Way
  • the origins of the generator development and company strategy

Questions, issues? Talk to us!

Do the following:

1. check out our Issue Guidelines and issues to see if there already is a solution or answer.
2. - Get in touch with other developers and our core team.
3. If all fails, make sure you have read the Issue Guidelines first and then open a new issue.

Want to contribute ideas, code?

Start by reading our:

1. Mission Statement
2. Contribution Guide

License

Code licensed under MIT. Docs under Apache 2. PhoneGap is a trademark of Adobe.

generator-m-ionic's Issues

Test: gulpfile after generation

Test the functionality of the gulp file similar to - https://github.com/youngmountain/generator-node-gulp/blob/master/test/test-generated-project.js

gulp: source maps

for better debugging.
#3 Needs to be solved first, when considering source maps for gulp-ruby-sass

• gulp-ruby-sass - https://github.com/sindresorhus/gulp-ruby-sass
  • sourcemaps? - https://github.com/sindresorhus/gulp-

Test: improve tests

Add tests

• yeoman guide - http://yeoman.io/contributing/testing-guidelines.html

functionality

all flags

cordova integration

Is it possible to run generator without skip-sdk option so integrations test for cordova are possible?

check platforms, plugins, etc...
Right now travis does not support multiple languages
http://stackoverflow.com/questions/18456611/is-it-possible-to-set-up-travis-to-run-tests-for-several-languages

Only run integration tests when in local environment !process.env.CI? similar to gulpfile

subgenerators

https://github.com/mwaylabs/generator-mcap/tree/master/test

• discussion about testing sub generators on yeoman repo. see yeoman/generator#718
• withYoRC() method suggestion for running context. see yeoman/generator#742

generator update / non-empty dir

https://github.com/yeoman/generator/blob/master/lib/test/run-context.js#L56

after generation

jshint/jscs

Test the jscs/jshint compatibility of the generated files

gulp file

especially important to quickly update dependencies without risks of breaking anything

• a more comprehensive and extensive sample app testing other features of the build etc...
  • images
  • more than one route
  • sample bower components (too much overhead?)
• Test the functionality of the gulp file similar to - https://github.com/youngmountain/generator-node-gulp/blob/master/test/test-generated-project.js
• Test helper functions for gulp tasks to avoid bugs like: #215

generator m doctor

test components after generation

• bower.json based on answers etc...

Coding styles

evaluate styleguides:

• community driven styleguide - https://github.com/mgechev/angularjs-style-guide#modules
• another styleguide - https://github.com/gocardless/angularjs-style-guide
• http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/
• https://github.com/johnpapa/angularjs-styleguide
• http://www.jeremyzerr.com/angularjs-directive-best-practices
• https://github.com/gocardless/angularjs-style-guide
• https://github.com/jmcunningham/AngularJS-Learning#best-practicesstyle-guides

how to enforce?

• naming guidelines how? e.g: Approvals not approvals and not approvals
• code structure (controller, databinding, functions, privates, ..)

Find a way to easily control cordova version

Control:

• cordova.js versions
• cordova cli versions
• cordova project versions
• cordova platform versions
• cordova plugin versions

Print command overview after running yo m

Print command overview after running yo m explaining how to continue with development:
gulp watch etc...

Test: Cordova integration tests

Solve #4 first.

Is it possible to run generator without skip-sdk option so integrations test for cordova are possible?

• check platforms, plugins, etc...

Right now travis does not support multiple languages:
http://stackoverflow.com/questions/18456611/is-it-possible-to-set-up-travis-to-run-tests-for-several-languages

helper to bump version number

Probably a gulp task will be useful to update the version number of the project (cordova, bower, npm).
See here - https://github.com/diegonetto/generator-ionic/blob/master/Gruntfile.js#L30

Add option --no-cordova

which don't create any cordova specific files, task ....

fix out of date dependencies

https://david-dm.org/mwaylabs/generator-m

doc license

The license should probably also be included in the code base, right?

Replace gulp --cordova with something more useful

The option syntax seems a little confusing. It seem more readable and easier to write gulp cordova 'plugins ls' rather than gulp -- cordova 'plugins ls'. Unfortunately this is not possible. How should we do it?
Additionally right now when running just gulp it throws an because the default task is cordova. What should the default task be?

Add troubleshooting/known issues section

Document known issues with components, operating systems, etc... that we don't control
Like issue #47

Start integration with Jenkins & Relution

• cordova prepare
• jenkins.sh
• inject dynamic bundle ID / build# on running build
• version from config.xml

gulp watch: exits on js error

• use plumber?
• which task throws error in the first place?

Jenkins/travis build file

Provide a jenkins build file that can be configured to build your project on jenkins/travis

Split and review gulp tasks

• Split into individual files for better readability.
• review (todos, comments, etc...)
• compare functionality against other popular repositories:
  • https://github.com/Swiip/generator-gulp-angular/blob/master/app/templates/gulp/_build.js
  • https://github.com/yeoman/generator-gulp-webapp
• update readme

Assemble utils module

Collect best-practices in util module that can be reused in other projects.
Ideas:

• delimiter filter
  • dash
  • pipe
• localForage/localStorage sevice with encryption for userData etc...
• error logging (api/http/crittercism)
• metering (how many requests per day, payload, using which functions, ...?)

Prompt for appModule

• Prompt for appIdentifier (used for angular module). As apposed to appName (displayname below the appicon).
• Validate input (can use any string for angular module name?)
• Suggest dirname

additional linters

• include json linter
• css/scss linter
  • https://github.com/causes/scss-lint
  • https://github.com/attenzione/SublimeLinter-scss-lint

Add doc: how to contribute

Write a small guide that helps willing contributors to get started and deliver useful pull-requests:
touch on:

• jscs
• travis
• tests
• ...
  Good example: localforage - https://github.com/mozilla/localForage/blob/master/CONTRIBUTING.md

Add doc: gulp tasks & build

Explain the individual gulp tasks and build steps

gulp: plugins for web-based apps

• gulp-ng-html2js - https://github.com/marklagendijk/gulp-ng-html2js
• gulp-angular-templatecache - https://github.com/miickel/gulp-angular-templatecache
• gulp-rev - https://github.com/sindresorhus/gulp-rev

Test: jscs/jshint after generation

Test the jscs/jshint compatibility of the generated files

Add more sub-generators

Project structure and modularization needs to be defined first: #31

improvements:

• named functions for sub-generators
• multi-module project structure/settings/generators (ask for module?)

more generators:

• template
• directive
• filter
• constant
• find more: https://github.com/yeoman/generator-angular

out of scope:

• create routes

gulp

• adjust paths in generator gulpfile
• adjust generated gulpfiles (necessary?)

readme

• update!

jsdocs

• command to generate jscdocs
• generators should provide stubs for jsdocs
• jsdoc coverage?
• enforce jsdoc?

Generate files for testing

Livereload for the device

• check source - https://github.com/driftyco/ionic-cli#live-reload-app-during-development-beta
• gapreload plugin - https://github.com/fingerproof/cordova-plugin-gapreload

Generate better samples

Based on selection create samples for:

• cordova plugins
• angular modules
  ** translation / locale setup etc...

no clean/clear of the folder before new build

• when I read gulp tasks correctly, there is no clean/clear of the folder (www) before building.
• this is a problem when old images or other stuff is not erased

e.g. im having problems with the fonts task right now on the jenkins, but didnt realize on my machine because the fonts folder is not erased every time

precommit hooks

Provide precommit hooks for:

• jsonlint
• jscs/jshint
• ...

Find a way to remove cordova platforms and plugins from git repository

Is it possible to remove cordova platforms and plugins from the git repository?
related #124

• how to handle versions (platform and plugins), with cordova hooks and write to .yo-rc.json??

Provide dedicated folder for cordova assets

Provide a dedicated folder for cordova assets that are copied to the right location when building

• splash screen
• app icons

Consider node-sass or lib-sass as a replacement for ruby sass

Consider node-sass or lib-sass as a replacement for ruby sass thus get rid of the ruby/sass dependency

https://github.com/dlmanning/gulp-sass
https://github.com/sass/node-sass (gulp-sass may not work with plumber)
https://github.com/sass/libsass
https://github.com/medialize/sass.js (emscripten, so no libsass installation is needed, cumbersome on windows)

Improve integration with Jenkins / Relution

• standardised jenkins configuration (analogous to travis.yml)
• app icons badges
• ios url schemes / android intents include build & version number for relution to show either install, update, open
  • defined in plist (ios), manifest (android)
• android
  • generate gradle
    • remove version and bundle identifier and inject with gulp
  • keystore
• ios
  • remove version and bundle identifier

sh /Users/jenkins/Documents/testtoolsios/add_rla_rlv.sh ${WORKSPACE}/GonalF/GonalF-Info.plist ${BUILD_NUMBER} 1.5.1 de.merck.gonalf.enterprise
#!/bin/bash
# © M-Way Solutions GmbH 2013, Martin Wieland
# Add bundleId and bundleversion specific url schemes

PLISTBUDDY="/usr/libexec/PlistBuddy"
INFO_PLIST="$1"
BUILD_NUMBER="$2"
VERSION="$3"
BUNDLEID="$4"

echo $INFO_PLIST

#BUNDLEID=$($PLISTBUDDY -c "Print :CFBundleIdentifier" "$INFO_PLIST" )
#VERSION=$($PLISTBUDDY -c  "Print :CFBundleVersion"    "$INFO_PLIST" )

echo $VERSION

if [[ $VERSION == *BUILD* ]]; then
    VERSION=1.0.$BUILD_NUMBER
else
    VERSION=$VERSION.$BUILD_NUMBER
fi

echo $BUNDLEID
echo $VERSION

$PLISTBUDDY -c "Delete :CFBundleVersion" "$INFO_PLIST"
$PLISTBUDDY -c "Add :CFBundleVersion string '$VERSION'" "$INFO_PLIST"

#if [[ $CONFIGURATION != *Enterprise* || $BUNDLEID != *enterprise* ]]; then
#   if [ "$ADD_RLA_RLV" == "" ]; then
#       echo "Ignore adding rla/rlv to plist"
#       exit 0
#   fi
#fi


BUNDLEID_SCHEME="rla"$(echo "${BUNDLEID}"          | cksum -o3 | awk '{print $1}')
 VERSION_SCHEME="rlv"$(echo "${BUNDLEID}_$VERSION" | cksum -o3 | awk '{print $1}')

echo "Add URLTypes for '$BUNDLEID': $BUNDLEID_SCHEME + $VERSION_SCHEME"

URLTYPES=$($PLISTBUDDY -c "Print :CFBundleURLTypes" "$INFO_PLIST" 2>/dev/null)
if [ "$URLTYPES" == "" ]; then
    $PLISTBUDDY -c "Add :CFBundleURLTypes array" "$INFO_PLIST"
fi

INDEX=0;

while :
do
    BUNDLEURLNAME=$($PLISTBUDDY -c "Print :CFBundleURLTypes:$INDEX:CFBundleURLName" "$INFO_PLIST" 2>/dev/null)

    if [ "$BUNDLEURLNAME" == "" ]; then
        #echo "End found: $INDEX
        break;
    fi

    if [ "$BUNDLEURLNAME" == "RelutionUrlName" ]; then
        $PLISTBUDDY -c "Delete :CFBundleURLTypes:$INDEX" "$INFO_PLIST"
        #echo "Delete :CFBundleURLTypes:$INDEX"
    else
        let 'INDEX=INDEX+1'
    fi
done

$PLISTBUDDY \
    -c "Add :CFBundleURLTypes:0 dict" \
    -c "Add :CFBundleURLTypes:0:CFBundleURLName string 'RelutionUrlName'" \
    -c "Add :CFBundleURLTypes:0:CFBundleURLSchemes array" \
    -c "Add :CFBundleURLTypes:0:CFBundleURLSchemes:0 string '$BUNDLEID_SCHEME'" \
    -c "Add :CFBundleURLTypes:0:CFBundleURLSchemes:1 string '$VERSION_SCHEME'" \
    "$INFO_PLIST"

# "$PLISTBUDDY" -c Print "$INFO_PLIST"
[23/10/14 12:28:13] Jonas Kaufmann: com.mwaysolutions.enterprise.onventis.tradecore
[23/10/14 12:28:17] Jonas Kaufmann: enterprise
[23/10/14 12:29:09] Jonas Kaufmann: Appstore: com.onventis.TradeCoreSmartConnect
[23/10/14 12:29:36] Jonas Kaufmann: v.100.1.0.5.990
[23/10/14 12:30:17] Jonas Kaufmann: 2.0.0.0

Add doc: local vs global cordova

Explain why it is necessary to wrap the cordova cli into: gulp --cordova

Separate folder for all cordova files

• is this functionality provided by cordova?
• is there a stable way to do this? (without affecting the cli commands like cordova plugin update etc...

Check for empty directory when running generator

Cannot run git init && yo m.
Won't work because cordova will only create projects in empty directories.

Remove cordova.js on gulp watch after build

gulp-inject doesn't update when stream is empty:klei/gulp-inject#59
Other aspects to consider:

• cordova automatically injects when building/running?
• bower not up to date - https://github.com/mgcrea/bower-cordova
• ngCordova doesn't even have cordova as dependency - https://github.com/driftyco/ng-cordova/blob/master/bower.json

Cordova update strategy

How can projects created with the generator be updated:

• update platforms within the projects cordova platform update <platform>? - https://cordova.apache.org/docs/en/3.5.0/guide_cli_index.md.html#The%20Command-Line%20Interface
• update project itself? config.xml etc...

gulp: environments with ng-constants

endpoint configuration for

• watch
• build

todo:

• define how gulp task syntax should look
  • gulp watch --api=mock?
  • gulp build --api=prod?
• recipe with gulp if?
  • https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md
  • argument parser
    • https://github.com/chevex/yargs
    • https://github.com/substack/node-optimist
    • https://github.com/substack/minimist
• with gulp inject?
  • into js file - klei/gulp-inject#81
  • into a config file - https://github.com/klei/gulp-inject#injecting-into-a-json-file
• find and evaluate a gulp plugin similar to this: https://github.com/werk85/grunt-ng-constant
  • https://github.com/guzart/gulp-ng-constant
  • https://github.com/ajwhite/gulp-ng-config

Define project structure & modularization of generated project

sources:

• google: angular app structure recommendation - https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
  • yeoman generator for 'enterprise-apps' follows the structure above
  • https://github.com/cgross/generator-cg-angular
• community driven styleguide - https://github.com/mgechev/angularjs-style-guide#modules
• modularization techniques - http://de.slideshare.net/xmlking/spa-20
• john papa - https://github.com/johnpapa/ng-demos/tree/master/modular/src/client
• another styleguide - https://github.com/gocardless/angularjs-style-guide

discuss:

• file and component naming conventions - controller, service, filter, dir, const, ...
• what is likely to be adopted by most people/projects? - e.g. generator-angular etc...
• what to do with:
  *translation files, scss/css, images, ...
  • constants
  • shared directives

gulp tasks:

• reload when assets are changing
• copy assets on build

Add doc: development guidelines

Define precise development guidelines:
milestones, changelogs, breaking changes, labels ...

Cordova iPhone 6 support

Update strategy & backwards compatibility for the generator

• how can you work on old projects that were built with an old generator
• how can you update old projects to a new generator version

Update cordova to the latest version, or ask the user which version to install

• due to iOS 8 support, we should update cordova to 4.0.0
• if its possible I would prefer asking the user a question which cordova version to install.

copy issues (fonts/images)

• my fonts directory is not copied to the build folder
• I read a fixme in the code, but there was no issue on github
• also right now only .svg images are copied somehow, my png files are missing in the build folder

Prompts for creating/updating config.xml

• name
• description
• author
• bundle identifier

do with gulp or yeoman?

gulp-ruby-sass plugin throws errors

[16:54:47] [gulp-ruby-sass]
NoMethodError: undefined method `specificity' for [:not(.bar-subheader)]:Array

[16:54:47] Plumber found unhandled error:
Error in plugin 'gulp-ruby-sass'

NoMethodError: undefined method `specificity' for [:not(.bar-subheader)]:Array

Using Sass 3.4.6 (Selective Steve)

Start gulp-build before cordova emulate

• to make it easier for the user we should consider building the app and moving into www before an emulate
• this is according to @gruppjo already built in for 'cordova run'