I’ve been lucky enough to be developing with the Ionic framework lately. One issue I keep running into is – how do I manage some environment variables (base api url, debug enabled, upload url, etc) across my code, both tests and application.
I’d like to share a little solution I’ve come up with. It may not be the BEST solution to take, but it has been working great for me.
I’d like to have some files that I can preprocess – say ‘AppSettings.js’ that will expose some variables for the rest of my application to use. This could contain those pesky variables that I will need to change frequently.
I put my preprocess file templates in my root folder named
templates. I will have that file contain my preprocess variables. I will spit out the preprocessed file as
www/js/appsettings.js file once its been preprocessed.
That preprocessed file will be used in both my
index.html and my
karma.conf.js for testing.
1 2 3 4 5 6 7 8 9 10 11 12
In my preprocess file – you can see I have some
@if ENV == '' statements beginning with
// – these will be replaced if the
if statement is true. (Duh)
Gulp Preprocess Task
I like gulp preproces. Install with
npm install --save-dev gulp-preprocess.
My gulpfile contains 3 tasks –
test_env / and
prod, looking like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Now I just have to fire off
gulp dev for my development settings,
gulp test_env for test settings, and
gulp prod for production settings.
As I mentioned – this works great for my tests, as I include the preprocessed file in
karma.conf.js so my tests can use
AppSettings.baseApiUrl (make sure you have your tests call the
dev task first!)
I hope this helps any who may have some environment variables they need to change between environments!