I'm building an web app using Polymer from an app template via polymer init starter-kit
.
I have some phase-specific environment variable such as backend API entrypoint. There's a behavior for those environment variables:
<script>
EnvBehavior = {
properties: {
apiBaseUrl: {
type: String,
// value: '//some-url.com' // production
value: 'http://localhost:8000' // development
}
}
};
</script>
And apiBaseUrl
is used in other elements:
<dom-module id="my-element">
<template>
<iron-ajax url="{{apiBaseUrl}}/foo" method="POST"
content-type="application/x-www-form-urlencoded"
body="{{requestBody}}" handle-as="json"
on-response="onResponse" on-error="onError"></iron-ajax>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
requestBody: {foo: 'bar'}
},
behaviors: [EnvBehavior],
onResponse: function(e) {
console.log(e.detail.response);
},
onError: function(e) {
console.log(e.detail.request.xhr.response);
}
});
</script>
</dom-module>
This works. But I'd like to build an app for production with apiBaseUrl
's default value //some-url.com
, which is commented out on the code. How can I effectively set phase-specific variables on build time? I use polymer-cli for build; run polymer build
.