JS Hook System

[imhoffd]

Gulp tasks and npm scripts can't effectively take parameters or information about project context that the Ionic CLI knows about. For more advanced use cases, a new hook system may be required. It could be modeled after Cordova's new hook system, which essentially calls a JS function with context (see https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/#javascript).

See #2463 and #2529

[lordgreg]

Thank you for creating this issue. Our use-case looks like this:

Enterprise apps we build require more than jest one (or even two environments). Usually, we have at least 3, named as dev, prod, test or alpha, beta, stable. A lot of apps have another environment staging, which, in our scenarios leads to 3 to 4 environments. Why is this so important? Because

1. we cannot differentiate between dev or prod mode (webpack) and
2. we have a hook that should (in above scenario) always run on watch.

There's a directory under src, called constants. Within, there are files: app.constants.ts, app.constants.dev.ts, app.constants.prod.ts, app.constants.test.ts, app.constants.dev-proxy.ts and app.constants.prod-proxy.ts. Each of these files has different variables, including one called BASE_URL which, by the looks of it, is always different. Lets say we want to call our task/hook: set-environment --env=dev-proxy after every watch trigger. The hook gets the env parameter from its parent task, ionic serve. It copies the content of app.constants.{env}.ts into app.constants.ts. The app.constants.ts is then being used/imported in all needed files. This saves, to say at least, tons of time because if editing one desired env file, the changes would be immediately accepted and pushed to app.constants.ts and not always needing to cancel the ionic serve re-running npm run our-script -- --env=our-desired-environment and then after it ionic serve again.

This is one of our top 3 tasks we use at every project. Not being able to use the shortcuts is a time loss for us and we, the company, would be happy with any improvement done in this part of cli. Passing parameters, even if defined statically or at least if hook could at least take one parameter, we could update our hook to accept only param1:val1#param2:val2... or any other possible option.

Thank you for inviting me to this issue.

Update @ Aug 2nd 8:18 CET

One note to take into consideration about cordova approach. I never tested if that kind of input can start locally installed node module?

scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", for example? Can scriptLocation be also npm run set-environment? If not, who would handle the differences between path on different systems? (c:\\scripts\\env.js vs /scripts/env.js)?

[imhoffd]

@lordgreg FWIW you can use environment variables today with npm scripts:

$ APP_ENV=dev ionic serve

"scripts": {
  "our-script": "something --env=${APP_ENV}"
}

Here's a short description of the JS hooks: In ionic.config.json, add a hooks object with the hook names listed here (without the ionic: prefix) as keys and a string or an array of strings as values. The values would be paths to Node.js scripts, generally relative paths from the ionic.config.json file itself. To your question about paths on different systems, Node's path.normalize(), which is used pretty much everywhere for path input in the CLI, takes posix paths such as foo/bar/baz and normalizes them to foo\\bar\\baz on Windows.

The Node scripts would look pretty typical. For your use case, I'd imagine the script looking something like this:

exports = async (context) => {
  const env = context.argv['env'];
  const crossSpawn = await context.importModule('cross-spawn');

  return new Promise((resolve, reject) => {
    const p = crossSpawn.spawn('npm', ['run', 'our-script', '--', `--env=${env}`]);

    p.on('error', err => {
      reject(err);
    });

    p.on('close', code => {
      if (code === 0) {
        resolve();
      } else {
        reject(code);
      }
    });
  }
};

The CLI hook would wait for the promise to be resolved before moving on with execution.

[lordgreg]

@dwieeb thank you for your response.

I am aware of the upper environment usage of npm scripts. From the beginning, my scenario was to use the whole hook scripts like that:

ionic serve -b --env=staging
// some file gets changed, watch hook starts, which immediatelly also calls our script, passing parameter `--env=staging` to it

If this would be doable using ionic.config.json, I don't mind, I'd use it. But, so far, the biggest issue, as said, is, that I cannot add extra parameters to ionic cli commands which would then be somehow translated/forwarded to hook scripts.

[mark-veenstra]

@dwieeb
Any updates on this? We also use custom arguments to the build process. These arguments are evaluated in several hooks.
But the Ionic CLI command does not pass the custom argments to the cordova command, so all hooks are failing. What to do about this?

[rkrisztian]

I am in serious need of a solution or at least a workaround. I can't pass --buildFlag=... parameters to cordova via NPM script ionic cordova build ios --release --prod --device --buildFlag=... --buildFlag=....

Edit: Sorry, my bad for not prefixing custom arguments with the -- parameter, if I do, everything is OK. And I can also use the build.json approach, as --buildConfig is supported by ionic.

[imhoffd]

@rkrisztian Can you elaborate? When and how does your npm script run from invoking ionic cordova build ios ...?

[rkrisztian]

@dwieeb, no, I don't think that's necessary info.