@blakeyrat said in Deploying Vue.JS Single Page App to multiple environments-- how?:
Yeah but why not?
So you have a QA server and a production server. You put the code on QA, do all kinds of testing, yay it seems to work, now it's time to put the code on production-- but you're putting up different code on production. ... well shit! You've just invalidated your entire QA effort, didn't you?
The other problem is of course I'm working within the confines of VSTS which assumes a build, once built, is immutable and it has no concept of "doing a new build for a deploy". You build once, ever, and deploy multiple times. (And frankly, good for VSTS-- it has the right idea and is doing the right thing-- it's not VSTS's fault that the JS community still has no fix for this simple problem!)
This all sounds like a very theoretical problem. I can't think of a way changing the API url and some keys can have negative effect on the code itself.
So far all of these solutions frankly kind of suck. I'm leaning towards doing the simple "search and replace on deploy" method (fortunately VSTS is flexible enough to let you run arbitrary PowerShell during deploy), but goddamn... seriously? It's 2018, it feels like I'm using sticks and rocks to build a space shuttle.
The second best solution is to have the JS load a JSON config file on first-run, but that makes an already-fragile app even more fragile.
Search and replace will work for API url, but it's fragile for maintenance. What if you start increasing the number of options you need to regexp and some of those are less distinctive than URL-s?
Loading a js <script>
file that sets something like window.CONFIG
is better, but then you have even less confidence your staging will work the same as production.
The most "correct" solution would be that both your staging and production target the same reverse-proxy, which then splinters traffic based on origin or similar. But once again, you then have a situation where staging can influence production, and vice versa.
Just compile two freaking bundles.