We are using Angular with Bower with a Python API for our stack. We have multiple environments that the code runs in - dev, staging, prod, etc. As of right now, we have to manually change connection strings for the front-end after we push fresh code to it to accommodate the environment it's in - but obviously that's not the right way to do things. To elaborate, say, we have following hosts for the front end: www.something.com and www.test-something.com and they should connect to apisomething.com and test-apisomething.com to pull data, respectively.
My objective is to be able to deploy code to any of the environments without having to change any values. Usually, I'd use environment variables on the server side to create all the links, but since Angular runs in a browser, those variables can't be accessed. So I am not sure how to proceed.
My research came up with tutorials using Grunt here and here but since we aren't using Grunt, that's not working out.
My thought is to write a Python script to manually generate a "constants.js" in the same directory as the app.js file resides (it would have to be run once for each environment) and include that file into git.ignore. The script will take a parameter and basically be a one-liner: "var base_url = \"www.something.com\"" where the value of base_url will vary with the parameter passed into the script. This is as far as I have gotten.
So, here are the questions:
- Is there a better way?
- If not, what is the best way to make the
value of
base_urlaccessible in the Angular app? Service, module, etc? And how would that work?
