Feature/env vars

[cescoferraro]

solves this ionic-team/ionic-cli#1205 by adding IONIC_ENV as arollup global variable. Then you can check the environment in any typescript file like.

declare var IONIC_ENV:string;

console.log(IONIC_ENV)
// outputs 'dev' or 'prod'

[rolandjitsu]

@cescoferraro this is not working with ionic serve, am I correct?

[cescoferraro]

It was working by the time I was using rollup. Webpack offers similar configuration

[rolandjitsu]

I was just using your patch as inspiration and I forgot to reference the custom config file for rollup. It seems to be working just fine, the only issues are with where the builds are being placed.

So may bad 👍

[rolandjitsu]

I've actually just tried this with a production build, and somehow, this env var is ignored.

[cescoferraro]

@rolandjitsu same thing for webpack. My builds are way faster

var path = require('path');
var webpack = require('webpack');




// for prod builds, we have already done AoT and AoT writes to disk
// so read the JS file from disk
// for dev buids, we actually want to pass in .ts files since we
// don't have .js files on disk, they're exclusively in memory

function getEntryPoint() {
  if (process.env.IONIC_ENV === 'prod') {
    return '{{TMP}}/app/main.prod.js';
  }
  return '{{TMP}}/app/main.dev.js';
}

function getPlugins() {
  console.log(process.env.IONIC_ENV);
  let env = new webpack.DefinePlugin({
    'process': {
      'VERSION': JSON.stringify(process.env.VERSION),
      'ENV': JSON.stringify(process.env.IONIC_ENV)
    }
  });
  if (process.env.IONIC_ENV === 'prod') {
    return [
      // This helps ensure the builds are consistent if source hasn't changed:
      new webpack.optimize.OccurrenceOrderPlugin(),env
      // Try to dedupe duplicated modules, if any:
      // Add this back in when Angular fixes the issue: https://github.com/angular/angular-cli/issues/1587
      //new DedupePlugin()
    ];
  }
  return [env];
}

module.exports = {
  entry: getEntryPoint(),
  output: {
    path: '{{BUILD}}',
    filename: 'main.js'
  },
  devtool: 'source-map',

  resolve: {
    extensions: ['.js', '.json']
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      }
    ]
  },

  plugins: getPlugins(),

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

[rolandjitsu]

I had to switch to rollup because I get #393. But after I deployed the app to cloud and tried to use it with Ionic View I realized that somehow all my env vars are ignore and API calls were made to file:// instead of the remote endpoint that was supposed to be replaced by rollup.

I think it has something to do with AOT, as I think you explain above. But do you have any idea how to make this work with prod builds?

[cescoferraro]

@rolandjitsu I think ionic serve always return dev. On production you have to ionic build and then serve the www/ folder content somehow. I use nginx.

[cescoferraro]

  "config": {
    "ionic_webpack": "./webpack.config.js"
  }

[rolandjitsu]

This solution does not work for prod builds due to AOT resolving values statically. So the only workaround is to use strings instead of vars. E.g.:

// rollup.config.js
replace({
    '{{API_URL}}': process.env.IONIC_ENV === 'dev' ? 'localhost:8000/api' : 'api.domain.com'
})

// some_file.ts
http.get('{{API_URL}}/ping')

At runtime, '{{API_URL}}' will be replaced with the right string.