Added cordova/mobile template + bugfixes

.travis.yml

@@ -10,15 +10,24 @@ node_js:
   - stable
 
 addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
+  chrome: stable
 
 matrix:
   fast_finish: true
 
+env:
+  matrix:
+    - CASE=cordova/bootstrap
+    - CASE=cordova/bootstrap-authentication
+    - CASE=cordova/ionic
+    - CASE=cordova/ionic-authentication
+    - CASE=web/bootstrap
+    - CASE=web/bootstrap-authentication
+    - CASE=web/ionic
+    - CASE=web/ionic-authentication
+    - CASE=web+cordova/bootstrap-authentication
+    - CASE=web+cordova/ionic-authentication
+
 install:
   - npm install -g yo
   - npm install
@@ -30,4 +39,4 @@ before_script:
   - sh -e /etc/init.d/xvfb start
 
 script:
-  - npm test
+  - npm test $CASE

README.md

@@ -1,12 +1,5 @@
 # :rocket: generator-ngx-rocket
 
-**:loudspeaker: We have moved! :loudspeaker:**
-
-As you may have noticed, this generator [has moved](https://github.com/ngx-rocket/generator-ngx-rocket/issues/65) to the `ngx-rocket`
-organization, and has been renamed from `generator-ngx-app` to `generator-ngx-rocket`, so update your bookmarks/remotes! :rocket:
-
----
-
 [![NPM version](https://img.shields.io/npm/v/generator-ngx-rocket.svg)](https://www.npmjs.com/package/generator-ngx-rocket)
 [![Build status](https://img.shields.io/travis/ngx-rocket/generator-ngx-rocket/master.svg)](https://travis-ci.org/ngx-rocket/generator-ngx-rocket)
 ![Node version](https://img.shields.io/badge/node-%3E%3D6.0.0-brightgreen.svg)
@@ -31,20 +24,34 @@ See generated project example [here](https://github.com/ngx-rocket/starter-kit).
 
 # Getting started
 
+## Using ngX-Rocket CLI
+
+1. Install required tools:
+ ```sh
+ npm install -g @ngx-rocket/cli
+ ```
+
+2. Create your application:
+ ```sh
+ ngx new
+ ```
+
+## Using Yeoman
+
 1. Install required tools:
- ```bash
+ ```sh
  npm install -g yo generator-ngx-rocket
  ```
 
 2. Create your application:
- ```bash
+ ```sh
  yo ngx-rocket
  ```
 
 # Project structure
 
 ```
-dist/                        compiled version
+dist/                        app production build
 docs/                        project docs and coding guides
 e2e/                         end-to-end tests
 src/                         project source code
@@ -72,16 +79,26 @@ proxy.conf.js                backend proxy configuration
 
 Task automation is based on [NPM scripts](https://docs.npmjs.com/misc/scripts).
 
-Tasks                         | Description
-------------------------------|---------------------------------------------------------------------------------------
-npm start                     | Run development server on `http://localhost:4200/`
-npm run build [-- --env=prod] | Lint code and build app for production in `dist/` folder
-npm test                      | Run unit tests via [Karma](https://karma-runner.github.io) in watch mode
-npm run test:ci               | Lint code and run unit tests once for continuous integration
-npm run e2e                   | Run e2e tests using [Protractor](http://www.protractortest.org)
-npm run lint                  | Lint code
-npm run translations:extract  | Extract strings from code and templates to `src/app/translations/template.json`
-npm run docs                  | Display project documentation
+Task                            | Description
+--------------------------------|---------------------------------------------------------------------------------------
+`npm start`                     | Run development server on `http://localhost:4200/`
+`npm run build [-- --env=prod]` | Lint code and build web app for production in `dist/` folder
+`npm test`                      | Run unit tests via [Karma](https://karma-runner.github.io) in watch mode
+`npm run test:ci`               | Lint code and run unit tests once for continuous integration
+`npm run e2e`                   | Run e2e tests using [Protractor](http://www.protractortest.org)
+`npm run lint`                  | Lint code
+`npm run translations:extract`  | Extract strings from code and templates to `src/app/translations/template.json`
+`npm run docs`                  | Display project documentation
+
+Additional tasks for Cordova-based projects:
+
+Task                            | Description
+--------------------------------|---------------------------------------------------------------------------------------
+`npm run cordova:prepare`       | Prepare for building mobile app (restore Cordova platforms and plugins)
+`npm run cordova:run <ios/android> [--device]` | Run app on target platform device or simulator
+`npm run cordova:build [-- --env=prod]`        | Build mobile app for production in `dist/` folder
+`npm run cordova:clean`         | Removes `www/`, `platforms/` and `plugins/` folders
+
 
 When building the application, you can specify the target environment using the additional flag `--env <name>` (do not
 forget to prepend `--` to pass arguments to npm scripts).
@@ -123,19 +140,31 @@ Development, build and quality processes are based on [angular-cli](https://gith
   [Stylelint](http://stylelint.io) and [HTMLHint](http://htmlhint.com/)
 - Local knowledgebase server using [Hads](https://github.com/sinedied/hads)
 
+Native mobile application bundling is based on [Cordova](https://cordova.apache.org).
+Alternative enhanced web views are also supported:
+- [WkWebView](https://github.com/ionic-team/cordova-plugin-wkwebview-engine) for iOS (Ionic fixed version)
+- [Crosswalk](https://crosswalk-project.org) for Android
+
+
 #### Libraries
 
-- [Angular 4](https://angular.io)
-- [Bootstrap 4](https://v4-alpha.getbootstrap.com)
-- [Font Awesome](http://fontawesome.io)
+- [Angular](https://angular.io)
 - [RxJS](http://reactivex.io/rxjs)
-- [ng-bootsrap](https://ng-bootstrap.github.io/)
 - [ngx-translate](https://github.com/ngx-translate/core)
 - [Lodash](https://lodash.com)
+- UI based on:
+  * Bootstrap
+    - [Bootstrap 4](https://v4-alpha.getbootstrap.com)
+    - [ng-bootsrap](https://ng-bootstrap.github.io/)
+    - [Font Awesome](http://fontawesome.io)
+  * Ionic:
+    - [Ionic](http://ionicframework.com)
+    - [Ionic Native](https://ionicframework.com/docs/native/)
 
 #### Coding guides
 
 - [Angular](https://github.com/ngx-rocket/starter-kit/blob/master/docs/coding-guides/angular.md)
+- [Ionic](https://github.com/ngx-rocket/starter-kit/blob/mobile/ionic/docs/coding-guides/ionic.md)
 - [TypeScript](https://github.com/ngx-rocket/starter-kit/blob/master/docs/coding-guides/typescript.md)
 - [Sass](https://github.com/ngx-rocket/starter-kit/blob/master/docs/coding-guides/sass.md)
 - [HTML](https://github.com/ngx-rocket/starter-kit/blob/master/docs/coding-guides/html.md)
@@ -149,6 +178,7 @@ Development, build and quality processes are based on [angular-cli](https://gith
 - [Updating dependencies and tools](https://github.com/ngx-rocket/starter-kit/blob/master/docs/updating.md)
 - [Using a backend proxy for development](https://github.com/ngx-rocket/starter-kit/blob/master/docs/backend-proxy.md)
 - [Browser routing](https://github.com/ngx-rocket/starter-kit/blob/master/docs/routing.md)
+- [Cordova](https://github.com/ngx-rocket/starter-kit/blob/mobile/ionic/docs/cordova.md)
 
 # Contributing
 

generators/app/index.js

@@ -5,12 +5,11 @@ const Insight = require('insight');
 const Generator = require('@ngx-rocket/core');
 const asciiLogo = require('@ngx-rocket/ascii-logo');
 
+const prompts = require('./prompts');
 const options = require('./options.json');
-const prompts = require('./prompts.json');
 const pkg = require('../../package.json');
 
 class NgxGenerator extends Generator {
-
   initializing() {
     this.version = pkg.version;
     this.insight = new Insight({trackingCode: 'UA-93069862-1', pkg});
@@ -48,7 +47,7 @@ class NgxGenerator extends Generator {
     // Composition
     const addonsOption = this.options.addons;
     const addons = addonsOption ? addonsOption.split(' ') : [];
-    addons.forEach(addon => this.composeWith(addon));
+    addons.forEach(addon => this.composeWith(addon, this.options));
 
     this.insight.track('generator', this.version);
     this.insight.track('node', process.version);
@@ -57,25 +56,31 @@ class NgxGenerator extends Generator {
   }
 
   prompting() {
-    return super.prompting().then(() => this.shareProps(this.props));
+    return super.prompting()
+      .then(() => {
+        this.props.mobile = this.props.mobile || [];
+        this.props.webview = this.props.webview || [];
+        this.shareProps(this.props);
+      });
   }
 
   configuring() {
-    this.insight.track('generator', 'web', 'bootstrap');
+    this.insight.track(
+      'generator',
+      this.props.target,
+      this.props.target.includes('cordova') ? this.props.mobile : '',
+      this.props.ui,
+      this.props.auth ? 'auth' : 'no-auth'
+    );
   }
 
   install() {
     const skipInstall = this.options['skip-install'];
 
     if (!skipInstall) {
       this.log(`\nRunning ${chalk.yellow('npm install')}, please wait...`);
+      this.npmInstall(null, {loglevel: 'error'});
     }
-
-    this.installDependencies({
-      skipInstall,
-      bower: false,
-      skipMessage: true
-    });
   }
 
   end() {
@@ -86,13 +91,22 @@ class NgxGenerator extends Generator {
 
     this.log('\nAll done! Get started with these tasks:');
     this.log(`- $ ${chalk.green('npm start')}: start dev server with live reload on http://localhost:4200`);
-    this.log(`- $ ${chalk.green('npm run build')}: build app for production`);
+
+    if (this.props.target.includes('web')) {
+      this.log(`- $ ${chalk.green('npm run build')}: build web app for production`);
+    }
+
+    if (this.props.target.includes('cordova')) {
+      this.log(`- $ ${chalk.green('npm run cordova:prepare')}: prepare for building mobile app`);
+      this.log(`- $ ${chalk.green('npm run cordova:run')}: run app on device or simulator`);
+      this.log(`- $ ${chalk.green('npm run cordova:build')}: build mobile app for production`);
+    }
+
     this.log(`- $ ${chalk.green('npm test')}: run unit tests in watch mode for TDD`);
     this.log(`- $ ${chalk.green('run test:ci')}: lint code and run units tests with coverage`);
     this.log(`- $ ${chalk.green('run e2e')}: launch e2e tests`);
     this.log(`- $ ${chalk.green('run docs')}: show docs and coding guides\n`);
   }
-
 }
 
 module.exports = Generator.make({

generators/app/prompts.js

@@ -0,0 +1,104 @@
+'use strict';
+
+module.exports = [
+  {
+    type: 'input',
+    name: 'appName',
+    message: 'What\'s the name of your app?'
+  },
+  {
+    type: 'checkbox',
+    name: 'target',
+    message: 'What kind of app do you want to create?',
+    choices: [
+      {
+        value: 'web',
+        name: 'Responsive web app',
+        checked: true
+      },
+      {
+        value: 'cordova',
+        name: 'Mobile app (using Cordova)'
+      }
+      // {
+      //   value: 'electron',
+      //   name: 'Desktop app (using Cordova)'
+      // }
+    ]
+  },
+  // {
+  //   type: 'confirm',
+  //   name: 'pwa',
+  //   message: 'Do you want progressive web app support? (manifest and service worker)',
+  //   default: true,
+  //   when: props => props.target.includes('web')
+  // },
+  {
+    type: 'checkbox',
+    name: 'mobile',
+    message: 'Which mobile platform do you want to support?',
+    when: props => props.target.includes('cordova'),
+    choices: [
+      {
+        value: 'ios',
+        name: 'iOS',
+        checked: true
+      },
+      {
+        value: 'android',
+        name: 'Android',
+        checked: true
+      }
+      // {
+      //   value: 'windows',
+      //   name: 'Windows (Universal)'
+      // }
+    ]
+  },
+  {
+    type: 'checkbox',
+    name: 'webview',
+    message: 'Use enhanced web view?',
+    when: props => props.target.includes('cordova'),
+    choices: props => {
+      const choices = [];
+      if (props.mobile.includes('ios')) {
+        choices.push({
+          value: 'wkwebview',
+          name: '[iOS] WKWebView (Ionic version)',
+          checked: true
+        });
+      }
+      if (props.mobile.includes('android')) {
+        choices.push({
+          value: 'crosswalk',
+          name: '[Android] Crosswalk',
+          checked: false
+        });
+      }
+      return choices;
+    }
+  },
+  {
+    type: 'list',
+    name: 'ui',
+    message: 'Which UI framework do you want?',
+    choices: [
+      {
+        value: 'bootstrap',
+        name: 'Bootstrap (more website-oriented)'
+      },
+      {
+        value: 'ionic',
+        name: 'Ionic (more mobile-oriented)'
+      }
+    ],
+    default: props => props.target.includes('cordova') ? 'ionic' : 'bootstrap'
+  },
+  {
+    type: 'confirm',
+    name: 'auth',
+    message: 'Do you want authentication?',
+    default: true
+  }
+];

generators/app/templates/.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
   "rules": {
     "font-family-name-quotes": "always-where-recommended",
     "function-url-quotes": ["always", { "except": ["empty"] }],
@@ -17,10 +17,11 @@
     "no-empty-source": null,
     "selector-class-pattern": "[a-z-]+",
     "selector-id-pattern": "[a-z-]+",
-    "selector-no-id": true,
+    "selector-max-id": 0,
     "selector-no-qualifying-type": true,
-    "selector-no-universal": true,
+    "selector-max-universal": 0,
     "unit-whitelist": ["px", "%", "rem", "vw", "vh", "deg"],
+    "max-empty-lines": 2,
     "max-line-length": 120
   }
 }