The purpose of this script is to aid with the use of production and development environments.

(designed for ionic2)

Features:

• Config files in either .js or .json (if both are found the .js config will be prioritized)
• Creates a provider file in src/providers/app-config.ts when this script is ran
• Access to enviornment variables through use of the .js file as a config

Implementation:

1. Place the script found at ./scripts/replace.env.js in your project inside of a scripts folder (create one if it does not exist).
2. Add the following commands to your package.json file inside of your scripts section:

"preionic:build": "node ./scripts/replace.env",
"preionic:serve": "node ./scripts/replace.env",
"generate-env": "node ./scripts/replace.env",

3. Create an env folder in your project and create files for your different evnironments named the way you want to refer to them in the command line. For example: production.js can be targeted with --env p

4. Import/inject the provider in your app.modules.ts as you would with any other provider (use this file path: ../providers/app-config)

5. Create your environment object and fill it with what you need

6. Import the module in any other ts file(s) you want to use it in.

7. Run npm run generate-env or your normal ionic serve or even ionic build and be sure to add the flag referring to the name of your js or json file as --env production or --env prod or --env p

8. Check your src/providers/app-config file to make sure it worked and for how call your variables.

ionic-app-scripts known issues/fixes

• ionic build <platform> --env p will get an error saying that p is not a valid platform. To fix this, run the command like this: ionic build android -- --env p for more information on what is actually going on, you can refer to the cordova cli docs found here specifically the the part related to [-- <platformOpts>].

Protect your Environment Information:

• Add your config files to a .gitignore file to match all .json and .js env/*.js, env/*.json and src/providers/app-config.ts be sure not to include a reference that could target your app-config.ts.

Examples:

My env folder has 3 files and their contents include:

• development.json

{
"apiUrl": "www.your-dev-url.com"
}

• production.js

var data = require(__dirname + "/production.json");
data.someApiKey = process.env.someKey;
module.exports = data;

• production.json

{
"apiUrl": "www.your-prod-site.com"
}

• if I run npm run generate-env --env d my component contains this:

...
@Injectable()
export class AppConfig {
 constructor() {}
 static get apiUrl() {
  return "www.your-dev-url.com";
 }
}

• if I run npm run generate-env --env p my component contains this:

...
@Injectable()
export class AppConfig {
 constructor() {}
 static get apiUrl() {
  return "www.your-prod-site.com";
 }
 static get someApiKey() {
  return undefined;
 }
}

Resources and Credits

• GitHub Environment Proposal: ionic-team/ionic-app-scripts#762
• Base Architecture Design: It was posted by juarezpaf in the above mentioned thread on March 8th, 2017.