Ionic 2 environment variables config setup

Ionic Framework ionic-v3
1

In Angular2 under config folder there is a set of files named (environment.ts, environment.dev.ts, environment.prod.ts) used to declar variables for dev environment and production.

These variables can be referenced in the ts files or by interpolation in the templates.

For example the base url, the backend API url, and so on.

My question is, How to do that in Ionic 2?

2

Considering this a feature request. Can’t think of a reason why ionic 2 has to not have it.

3

Should I move this to github issues?

4

Here’s my solution to the problem:

var gulp = require('gulp'),
	gutil = require('gulp-util'),
	gulpWatch = require('gulp-watch'),
	rename = require('gulp-rename'),
	del = require('del'),
	runSequence = require('run-sequence'),
	argv = process.argv;

/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done) {
	runSequence(
		['sass', 'html', 'fonts', 'config', 'scripts'],
		function() {
			gulpWatch('app/**/*.scss', function() { gulp.start('sass'); });
			gulpWatch('app/**/*.html', function() { gulp.start('html'); });
			buildBrowserify({ watch: true }).on('end', done);
		}
	);
});
gulp.task('build', ['clean'], function(done) {
	runSequence(
		['sass', 'html', 'fonts', 'config', 'scripts'],
		function() {
			buildBrowserify({
				minify: isRelease,
				uglifyOptions: {
					mangle: false
				},
				browserifyOptions: {
					debug: !isRelease
				}
			}).on('end', done);
		}
	);
});

gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('config', function() {
	var options = {
		inputPath: './app/config/',
		inputFile: isRelease ? 'config.release.ts' : 'config.debug.ts',
		outputPath: './app/config/',
		outputFile: 'config.ts'
	};
	return gulp.src(options.inputPath + options.inputFile)
		.pipe(rename(options.outputFile))
		.pipe(gulp.dest(options.outputPath));
});
gulp.task('scripts', copyScripts);
gulp.task('clean', function() {
	return del('www/build');
});

Then in app/config is have config.debug.ts and config.release.ts that looks something like this:

import {ConfigInterface} from '../interfaces';

const config: ConfigInterface = {
	prodMode: false,
	apiBaseUrl: 'http://devserver',
	googleAnalyticsId: '',
	loginDefaultEmail: '',
	loginDefaultPassword: '',
	supportEmail: ''
}

export default config;

When I run/serve/emulate with the --release flag app/config/config.release.ts gets copied to app/config/config.ts and when without that flag it copies config.debug.ts.

Then you just import config whereever you need from app/config/config.ts. Remember to run gulp config first to generate the config.ts file.

EDIT: Agreed, it would be nice if something like this was supported out of the box in Ionic 2.

2 Likes
5

Thanks @infoproducts I’d give that a try.
I will make that a feature request on github.

7

How do you do this now that Ionic has moved away from gulp?

2 Likes
8

would also be interested in knowing how this works in ionic 2

9

I’m waiting for hook support in ionic-app-scripts to make this possible without a custom webpack config.

1 Like
10

So nice… It look having some request feature reported for this thread on github ionic-cli https://github.com/driftyco/ionic-cli/issues/1205

11

With rollup, it throw warnings (a lot).
I don’t get the webpack config.