Feature request: Ionic 2 (dev/prod) environment variables configuration

@amreladawy

From @amreladawy on July 24, 2016 6:58

Short description of the problem:

It is a feature request.
Just like Angular2, I hope that Ionic can provide 2 files (environment.dev.ts and environment.prod.ts) that would contain variables with different values corresponding to production and development environment.
During the build, the appropriate file to be copied and bundled within the app artifact.

Which Ionic Version? 2.x

https://forum.ionicframework.com/t/ionic-2-environment-variables-config-setup/58147/1

https://stackoverflow.com/questions/36004810/how-to-config-different-development-environment-in-angular-2-app

Copied from original issue: ionic-team/ionic-framework#7413

Can we raise the priority for this issue? This is actually very important. Our app has different configs for prod and devel. Without this, it requires ugly hand rolled variable updates... Just make the release really cumbersome.

Currently our implementation uses the rollup-plugin-replace, and a slightly modified rollup config.

Basically what happens is that the import paths are replaced based on the process.env.IONIC_ENV variable during compile time. This will use the environment.dev.ts during development and environment.prod.ts when in production.

Implementation steps

install the rollup-plugin-replace
npm install --save-dev rollup-plugin-replace
create two files; environment.dev.ts and environment.prod.ts within e.g. the src/config directory.

├── src/config/environment.dev.ts

export const ENV = {  
  PRODUCTION : false,
  API_URL    : 'dev.local'
};

├── src/config/environment.prod.ts

export const ENV = {  
  PRODUCTION : true,
  API_URL    : 'prod.local'
};

import the environment-dev as the default within your pages / services etc.

// use the 'environment-dev' as the default import(!)
import { ENV } from '../../config/environment-dev';

@Component({
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
   console.log( ENV.API_URL );
}

update your /package.json

├── /package.json

"config": {
    "ionic_rollup": "./config/rollup.config.js"
}

create your rollup.config.js within the /config directory. Require the plugin, and add the replace snippet below to your plugins section. One can use node_modules\@ionic\app-scripts\config\rollup.config.js as a template.

├── /config/rollup.config.js

var replace = require('rollup-plugin-replace');
var isProd  = (process.env.IONIC_ENV === 'prod');
...
plugins: [
    replace({
      exclude: 'node_modules/**',
      // use the /config/environment-dev as the default import(!), no stub needed.
      // note we only replace the "last" part of the import statement so relative paths are maintained
      '/config/environment-dev' : ( isProd ? '/config/environment-prod' : '/config/environment-dev'),
    })
   ...
]

Hope this helps someone! Of course in an ideal situation a file replacement would take place, similar to the Angular CLI

With "@ionic/app-scripts": "0.0.39" now defaulting to webpack for bundling, I am doing something like this.

Steps to implement:

Make sure you have installed the latest app-scripts npm install @ionic/app-scripts@latest and have the latest tsconfig.json.
Install dotenv.
Create .env file with env variables defined in the root directory of your app. Recommended:
add .env to .gitignore.
Create and modify webpack.config.js from original found here:

├── /config/webpack.config.js

require('dotenv').config();

...
function getPlugins() {
  var plugins = [
    new webpack.DefinePlugin({
      'API_URL': JSON.stringify(process.env.API_URL)
      // Add any more variables here that you wish to define
    })
  ];

  if (process.env.IONIC_ENV === 'prod') {
      // This helps ensure the builds are consistent if source hasn't changed:
    plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  }
  return plugins;
}
...

Define custom webpack config file in package.json.

├── /package.json

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

Create custom typings file defining the constants that are in your .env file so that webpack can populate them and you are able to reference them in your application.

├── /src/customTypings/customTypings.d.ts

declare var API_URL: string;
// Add any more variables here that you wish to define

You should now be able to reference the global variable(s) in your app.

Furthermore, you can create multiple .env files for different environments and require them in webpack.config.js like so:

require('dotenv').config({path: '/custom/path/to/your/env/vars'})

This solution is working, but I think, rewriting all webpack.config is not good, becase updates... Is there any idea from ionic team?

@jgw96

@jgw96 Can we get this added to a milestone? We should be able to specify different environment configuration e.g. different API endpoints for dev and production. As @slinto mentioned creating a modified webpack.config is not ideal as updates will cause issues :/

I'd really like to see this functionality supported. Is a custom webpack config the only way?

hmm, the manual comment/uncomment of right ENV is dangerous, because is there a big risk with publishing application with development environment to store, especially if your team is about 1+ people :) I think about right way as:

ionic serve / DEVELOPMENT ENV (DEFAULT):
$ ionic serve

ionic serve / PRODUCTION or CUSTOM ENV:
$ ionic serve --env=prod,
$ ionic serve --env=test,
$ ionic serve --prod

ionic build / PRODUCTION ENV (DEFAULT):
$ ionic build

ionic build / DEVELOPMENT or CUSTOM ENV:
$ ionic build --dev
$ ionic build --env=test
$ ionic build --env=dev

eg. http://jonnyreeves.co.uk/2016/simple-webpack-prod-and-dev-config/

+1

Hey, guys, any progress of official implements?

Hi all! 👋 As many of you may have seen, we announced Ionic 4 beta on our blog! 🎉

I'm closing this issue as it has been addressed with Ionic 4. If I'm mistaken, please let me know.

Here is some documentation on the Angular CLI's concept of application environments: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/application-environments.md

Great! As the requestor of this feature, I am so happy it is finally resolved.

It is fixed if you upgrade aka migrate

…

On Mon, Jul 30, 2018, 10:22 PM Amr ElAdawy ***@***.***> wrote: Great! As the requestor of this feature, I am so happy it is finally resolved. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAP7O-_V4Or7xnbRBPUTEohiuPSAlhooks5uL815gaJpZM4JUhnW> .

@nphyatt

For all those still subscribed to this issue, @nphyatt has put in support for this in @ionic/app-scripts to support environments for Ionic 3!

It runs a Webpack plugin which replaces usages of process.env.VAR with string literals, using actual environment variables during the build to do so. See https://github.com/ionic-team/ionic-app-scripts#environments for docs and ionic-team/ionic-app-scripts#1471 for the PR. 🎉

Let us know what you think!

This is great news that this has arrived!
However:

The docs link provided on the app-scripts readme.md is extremely ambiguous and not very helpful whatsoever to someone wanting to implement in their existing/new projects.
Is there an example/starter project where this is being used correctly?
How does one specify the environment (prod/dev/etc) to the CLI?

Could you elaborate on how the documentation is ambiguous?

I do think the documentation assumes some knowledge about: environment variables, NodeJS's process.env, dev builds vs prod builds. But I also think this is fine. I suspect people who understand the concept of environments have likely come across the aforementioned concepts as well, but maybe I'm mistaken. In any case, I will look at PRs to app-scripts for improvements. 🙂

There's no example/starter, but if someone makes one I'd be happy to link to it.

The environment is either dev (default) or prod via --prod.

@dwieeb

@dwieeb Thank you for your response.

No matter whether --prod or --dev is used when running ionic serve/build the process.env.IONIC_ENV always specifies "dev" for me.
The doc mentions ".env.dev" and ".env.prod" files in root of application.
a. What is the full filename? anything.env.dev.ts? or did you mean env.dev.ts?
b. What is the root of the application? ./src (where index.html resides) or ./ (where package.json resides)?
c. is there an example what should the contents of these files should contain in order to alter environment variables?

Thank you in advance!

@granttink

Thanks @granttink! Good feedback.

IONIC_ENV not being set is a bug, probably something that was overlooked. I believe both it and NODE_ENV should be set to prod/production respectively if --prod is used.

Yeah, the files are actually optional, which I think should also be stated. Also, the documentation assumes some knowledge about the format of .env files. Also, we can make it clear that this is the webpack plugin we're using.

I added an issue to revise the documentation: ionic-team/ionic-app-scripts#1474. Thank you 👍

@dwieeb

Thank you @dwieeb, that clarifies things quite a lot.

Should this issue be closed? Considering the feature is not working correctly?

To clarify:

--prod or --dev does not load the relevant .env.prod/.env.dev file during pack. It always loads the .env file.
Custom Environment variables specified in the .env file do not get loaded into process.env
IONIC_ENV variable is always dev no matter what cli commands are used.

This issue will remain closed as it is now an available feature. There are minor issues with it, which should be tracked separately. I would prefer new issues for them. I will update this issue when they are fixed.

Any update or work around on this issue? I’m trying to build my app with the —prod flag now and it’s still not switching out the variables properly

For anyone who is still stuck on this; I simply needed to have different configurations for different environments. Check the following gist for my implementation: https://gist.github.com/md-hamed/9212a32b37e72b1f8fd51136b1e1dfdc

Navigation Menu

Repository navigation

Feature request: Ionic 2 (dev/prod) environment variables configuration #1205

Short description of the problem:

105 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Feature request: Ionic 2 (dev/prod) environment variables configuration #1205

Description

Short description of the problem:

Activity

itrethan commented on Oct 22, 2016

dnmd commented on Oct 24, 2016

tabirkeland commented on Nov 1, 2016

tomasstankovic commented on Nov 8, 2016

rossholdway commented on Nov 11, 2016

locnguyen commented on Nov 11, 2016

tomasstankovic commented on Nov 11, 2016

allaanz commented on Nov 14, 2016

zjhiphop commented on Nov 20, 2016

105 remaining items

imhoffd commented on Jul 30, 2018

amreladawy commented on Jul 31, 2018

joefeser commented on Jul 31, 2018

imhoffd commented on Aug 24, 2018

granttink commented on Sep 5, 2018

imhoffd commented on Sep 5, 2018

granttink commented on Sep 5, 2018

imhoffd commented on Sep 5, 2018

granttink commented on Sep 5, 2018

granttink commented on Sep 12, 2018

granttink commented on Sep 12, 2018

imhoffd commented on Sep 12, 2018

kyleabens commented on Oct 4, 2018

md-hamed commented on Dec 13, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions