Managing Application Properties and Environment Variables in Ionic?

#1

Gurus,

I have been looking for a way to manage application properties in Ionic apps with little success. I am from the Java land and have worked on a few apps using the lovely spring framework. In that space we do stuffs like that using .yml or .properties that can also be externalized from the app and updated at runtime. Obviously, I am not looking for anything that advanced, especially because that may not be possible since most of these apps run on mobile devices.

I am one of those who like to code and test realtime and I find the ionic serve command really helpful. However there is the CORS challenge that has the potential of causing some pain if the concept is not properly understood. Thankfully, there are tons of documents online on that. Here however, to circumvent some of that pain one has to proxy request through a configuration in the ionic.config.json file at development time. At release time that code has to be changed from using the proxy to using the actual URL since devices do not trigger CORS. This example, coupled with a few other properties such as, API public keys, partner URLs need to be managed properly. What is the best way to handle this in an ionic app.

#2

You could easily download a .json file dynamically from a server, that contains key-value combinations.

How exactly should the app choose which properties to use?

#3

That is definitely a great place to start. The challenge there is that the server URL may also be a property that needs to be loading and runtime.

Great question… Usually that is done using some kind of profile (dev, qa, prod, …)

1 Like
#4

Ok, so we are talking about environment variables here so e.g. debug and release builds can use different API endpoints and similar, right?

#5

That is exactly what we are talking about sir.

1 Like
#6

Ok, then one way would be to do it this way:


(No endorsement or personal experience - but this is what I have bookmarked for when I ever will need something like that)

1 Like
#7

Excellent! I will give this a try and see.

#8

Hey @bsakweson How did you end up solving this problem?

#9

For Ionic v4 take a look at this: