Deploying an angular app to different Heroku environments

[Mister Snow]

Hello good people!

 

I have an angular 7 application that is configured through environment files to target different backend servers based on dev/prod build flag. For example, if project is built with --dev flag, it will target  https://dev.backend and if it's built for production, target would be https://prod.backend. Now, the app is hosted on Heroku machine and I've made two instances, one for dev (or staging) and one for production.

In package.json I have a standard Heroku postbuild that looks like this:

"heroku-postbuild": "ng build --configuration=production"

 

Currently, I do the deployment manually by pushing different configs to dev and prod Heroku machines and I'm getting quite bored by it.

I would like to automate the deployment process through GitLab CI and deploy to Heroku dev machine when changes are pushed to develop branch and deploy to production machine on master branch push.
The problem with my current setup is that heroku-postbuild is locked to production build so it will always use the same env variables which means that it will target the same backend db from both dev and prod machines.

So the question is, how would I go around splitting this up and automating the process through GitLab?