Multiple environments & client specific app build in Ionic 4

Akash Jadhav
Nov 5 · 2 min read

Angular provides two environments, development & production out of the box. But what if you want to set a new environment? Or want to build an app with different configurations for different clients from same code base?


Setting up a new environment in Ionic 4 is pretty simple. Add new environment file, environment.client-1.ts in environments folder. If you want to add staging environment rename file accordingly.

We can set app level settings in this environment file like 👇. These settings can vary according to project requirements.

Now head over to configurations in angular.json file.

Here you will find predefined production configuration. Simply copy & paste the production settings & rename the configuration as client-1.

In fileReplacements array, replace the existing environment.ts file with newly created environment.client-1.ts file.

Add client-1 configuration in serve section.

Similarly, add client-1 configuartion in ionic-cordova-build (for building native app) and ionic-cordova-serve (for running on device or emulator).

You could add multiple environments using this steps and set different configurations for different clients. But as more number of environments grow it might get little difficult to manage.


Now to build app you could pass environment name:

ionic cordova build android - -configuration=client-1

To serve app in the browser:

ionic serve - -configuration=client-1

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade