pisco-cells-app-launch v0.2.7

Step launch

Launch a cells app locally

1. Description
2. Configuration
3. More information

Description

Launch a cells app locally, watch files changes, and update .tmp folder with those changes, for serving it locally.

Configuration

There is some launch related process:

1. Clean configuration
2. Linter configuration
3. Generate configuration
4. Mocks configuration
5. Serve configuration

1. Clean configuration

Before the launch process exists a optional process for clean a folder. This is the configuration of clean:

{
  "clean": {
    "active": false,
    "target": ".tmp"
  }
}

Where:

2. Linter configuration

Launch a static code analisis or linter process with eslint.

{
  "linter": {
    "active": true,
    "executeOnFiles": [
      "app/scripts"
    ],
    "config": {
      "plugins": [
        "html"
      ],
      "ignorePattern": [
        "app/scripts/vendor/**",
        "test/**",
        "tasks/**",
        "coverage-reports/**",
        "bower_components/**",
        "node_modules/**",
        "coverage_reports/**"
      ],
      "ignorePath": ".gitignore",
      "extensions": [
        ".js",
        ".html"
      ]
    }
  },
}

Where:

3. Generate configuration

The generate configuration defines the configuration to execute processes, when files inside an app are changed, and when the app is currently served.

Those process are:

1. appConfig configuration
2. componentHtml configuration
3. composerMocksTpls configuration
4. indexTpl configuration
5. sass configuration
6. transpile configuration

Example:

{
  "watch": {
    "generate": {
      "appConfig": {
        "active": true
      },
      "componentHtml": {
        "active": true
      },
      "composerMocksTpls": {
        "active": true
      },
      "indexTpl": {
        "active": true
      },
      "sass": {
        "active": true
      },
      "transpile": {
        "active": true
      }
    }
  }
}

3.1 appConfig configuration

Generate a file app-config.js with environment configuration app\env.json.

{
  "watch": {
    "generate": {
      "appConfig": {
        "active": true,
        "target": "{{folderTmp}}/scripts/"
      }
    }
  }
}

Where:

3.2 componentHtml configuration

Generate a file components.html in order to import all components defined in bower.json.

{
  "watch": {
    "generate": {
      "componentHtml": {
        "active": true,
        "source": "app/tpls/components.tpl",
        "target": "{{folderTmp}}/{{bowerComponents}}/components.html"
      }
    }
  }
}

Where:

3.3 composerMocksTpls configuration

Generate mocks files for composer with some templates.

{
  "watch": {
    "generate": {
      "composerMocksTpls": {
        "active": true,
        "regExpPattern": "##([\\.\\w]+)##",
        "regExpFlags": "g",
        "source": "composerMocksTpl/",
        "target": "{{composerEndPoint}}"
      }
    }
  }
}

Where:

3.4 indexTpl configuration

Generate a index.html files for composer with a folder with templates.

{
  "watch": {
    "generate": {
      "indexTpl": {
        "active": true,
        "regExpPattern": "##([\\.\\w]+)##", 
        "regExpFlags": "g",
        "source": "app/tpls/index.tpl",
        "target": "{{folderTmp}}/index.html"
      }
    }
  }
}

Where:

3.5 sass configuration

Generate css files with sass

{
  "watch": {
    "generate": {
      "sass": {
        "active": true,
        "size": { "title": "app/styles" },
        "autoprefixer": { "remove": true },
        "source": "app/**/*.scss",
        "target": "{{folderTmp}}"
      }
    }
  }
}

Where:

3.6 transpile configuration

Transpile js files with babel

{
  "watch": {
    "generate": {
      "transpile": {
        "active": true,
        "exclude": ["*polymer*", "rxjs", "webcomponentsjs"],
        "source": {
          "{{bowerComponents}}/!(${exclude})/*!(\\.min).{html,js}": "{{bowerComponents}}",
          "app/elements/!(${exclude})/*.{js,html}": "elements",
          "app/scripts/*.js": "scripts"
        },
        "plugins": [
          "babel-plugin-transform-es2015-arrow-functions",
          "babel-plugin-transform-es2015-block-scoped-functions",
          "babel-plugin-transform-es2015-block-scoping",
          "babel-plugin-transform-es2015-classes",
          "babel-plugin-transform-es2015-computed-properties",
          "babel-plugin-transform-es2015-destructuring",
          "babel-plugin-transform-es2015-duplicate-keys",
          "babel-plugin-transform-es2015-for-of",
          "babel-plugin-transform-es2015-function-name",
          "babel-plugin-transform-es2015-literals",
          "babel-plugin-transform-es2015-object-super",
          "babel-plugin-transform-es2015-parameters",
          "babel-plugin-transform-es2015-shorthand-properties",
          "babel-plugin-transform-es2015-spread",
          "babel-plugin-transform-es2015-sticky-regex",
          "babel-plugin-transform-es2015-template-literals",
          "babel-plugin-transform-es2015-typeof-symbol",
          "babel-plugin-transform-es2015-unicode-regex",
          "babel-plugin-transform-regenerator"
        ],
        "target": "{{folderTmp}}"
      }
    }
  }
}

Where:

4. Mocks configuration

Serve Mocks with Stubby through gulp stubby.

{
  "mocks": {
    "active": true,
    "stubby": {
      "stubs": 8000,
      "mute": false,
      "location": "0.0.0.0",
      "relativeFilesPath": true,
      "files": [
          "mocks/**/*-config.@(json|yaml)"
      ]
    }
  }
}

Where:

5. Serve configuration

General configuration for serve the app

{
  "serve": {
    "active": true,
    "sudo": false,
    "browserSync": {
      "serve4developers": {
        "notify": false,
        "ghostMode": false,
        "port": 8001,
        "startPath": "/{{appName}}/index.html",
        "reloadOnRestart": true,
        "serveStatic": [{
          "route": "/{{appName}}",
          "dir": ["{{folderTmp}}", "{{appFolder}}"]
        }, {
          "route": "/{{appName}}/{{bowerComponents}}",
          "dir": ["{{folderTmp}}/{{bowerComponents}}", "{{bowerComponents}}"]
        }],
        "server": {
          "baseDir": ".",
          "routes": {
            "/cellsApp/": "{{appFolder}}",
            "/cellsApp/{{bowerComponents}}": "{{bowerComponents}}"
          },
          "middleware": [],
          "index": "index.html"
        }
      }, 
      "serveDistribution": {
        "notify": false,
        "port": 8001,
        "startPath": "/{{config}}/{{type}}/index.html",
        "reloadOnRestart": true,
        "server": {
          "baseDir": [ "build" ],
          "middleware": [],
          "index": "index.html"
        }
      }
    }
  }
}

Where:

More information:

• Contexts: "app"
• Plugins: "cells-app-inquire-helpers", "configApp", "gulp", "launchInquirer", "nunjucks"
• Requirements: none