Local vs. prod link in index.html to static assets


#1

I’ve managed to upload my static assets to S3, so they could be served from there in prod. This required me to hardcode the s3 link to those assets in my index.html. Does anybody know how to make it so that in dev mode I use one link to my assets (e.g. build/css), and in prod mode I use the link to my s3 assets (e.g. s3.amazon…)

I have a globalVars service which I could use to set the root of those urls, but I don’t know how to use that in the html.

what I want in prod

  <link ios-href="//s3-us-west-2.amazonaws.com/myapp/assets/app.ios.css" rel="stylesheet">
  <link md-href="//s3-us-west-2.amazonaws.com/myapp/assets/app.md.css" rel="stylesheet">
  <link wp-href="//s3-us-west-2.amazonaws.com/myapp/assets/app.wp.css" rel="stylesheet"> -->

what I want in dev

  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">

#2

If what you meant by “prod” is when the app runs inside a device or emulator, window.hasOwnProperty(‘cordova’) is always available. Of course, the conditional must execute after

<script src="cordova.js"></script>

#3

Thanks for the response. In my case, I’m also trying to adjust the reference to the assets for mobile web. I haven’t implemented this yet, but believe the following is what I’ll use:

https://www.npmjs.com/package/gulp-rev-replace