cnative100/README.md

## README.md

      
    Raw
  

              README.md
            
          
    These snippets demonstrate externalizing an application configuration for Javascript. This is useful
to 1.) keep application configuration declarations out of your code so they can be easy changed throughout
the application, and 2.) manage configuration across multiple environments where app configuration
may be different for each target.
To implement:

Create an identical app config JS file for each target (e.g. dev, test, prod)
Modify the configuration variables in each config for each target
Put each of these files in the same app_config folder at the root of your app, and add to SCM
Add a script reference in your entry point (e.g. index.html) to the the app config file
Modify the script reference to point to the correct version of your app config

The example below externalizes web service URLs for iron-ajax components in a Polymer app.
This could be improved, if you're using Maven or some other build tool, by creating a profile for
each target that picks the correct version of the app-config file and deploys it to the correct
location. That would save you from updating the script reference in step 5.

  
## app-properties-dev.js
// This an example of an app config file used to manage web service URLs. You can create one of these
// for each of your deployment configurations (e.g. app-properties-dev.js, app-properties-test.js,
// app-properties-prod.js) and let them all sit in your deployment location. They're nice and small, so
// the unused versions don't hurt anything. Or, you can create Maven profiles to deploy just the files
// you want for each target.

var userAccountServiceBaseURL = "http://localhost:8080";

appProperties = {

	userAccountServiceCreateAccountServicePath : userAccountServiceBaseURL + "/landing-page/rest/accountService/create",
	userAccountServiceAuthenticationServicePath : userAccountServiceBaseURL + "/landing-page/rest/accountService/authenticate"

}

## index.html
<!-- index.html entrypoint for a Polymer app. Best to put the app-properties file here rather than
     inside individual web components to keep the properties from being cached multiple times on
     the browser. Just change app-properties-[dev/test/prod/etc].js depending on the target. -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>MyApp</title>
    <meta name="description" content="greenmaven description">

    <link rel="manifest" href="/manifest.json">

    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <script src="/app_properties/app-properties-dev.js"></script>

    <link rel="import" href="/src/my-app/my-app.html">
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

## my-app.html
<!-- You can now reference the app config within your components or anything else descended
     from index.html. In this example we use the app config to set URLs for a couple of
     iron-ajax components. -->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="my-app">
  <template>
    <style is="custom-style">
      :host {
        display: block;
      }
    </style>

      <iron-ajax
        id="getMarketInfoDatasource"
        params='{{getMarketInfoDatasourceParams()}}'
        handle-as="json"
        on-response="handleGetResponse">
      </iron-ajax>

      <iron-ajax
        id="createAccountService"
        params="{{getAccountCreationParams()}}"
        handle-as="json"
        on-response="handleAccountCreateResponse">
      </iron-ajax>

  </template>

  <script>
    Polymer({

      is: 'my-app',

      properties: {},

      // Page events ----------------------------------------------------
      ready: function () {
          this.$.getMarketInfoDatasource.url = appProperties.userAccountServiceGetGrowersEatersServicePath;
          this.$.createAccountService.url = appProperties.userAccountServiceCreateAccountServicePath;
      },

      getMarketInfoDatasourceParams: function () { /* Get some params */ },
      getAccountCreationParams: function() { /* Get some params */ }

  </script>
</dom-module>
	// This an example of an app config file used to manage web service URLs. You can create one of these
	// for each of your deployment configurations (e.g. app-properties-dev.js, app-properties-test.js,
	// app-properties-prod.js) and let them all sit in your deployment location. They're nice and small, so
	// the unused versions don't hurt anything. Or, you can create Maven profiles to deploy just the files
	// you want for each target.

	var userAccountServiceBaseURL = "http://localhost:8080";

	appProperties = {

	userAccountServiceCreateAccountServicePath : userAccountServiceBaseURL + "/landing-page/rest/accountService/create",
	userAccountServiceAuthenticationServicePath : userAccountServiceBaseURL + "/landing-page/rest/accountService/authenticate"

	}
	<!-- index.html entrypoint for a Polymer app. Best to put the app-properties file here rather than
	inside individual web components to keep the properties from being cached multiple times on
	the browser. Just change app-properties-[dev/test/prod/etc].js depending on the target. -->

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

	<title>MyApp</title>
	<meta name="description" content="greenmaven description">

	<link rel="manifest" href="/manifest.json">

	<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
	<script src="/app_properties/app-properties-dev.js"></script>

	<link rel="import" href="/src/my-app/my-app.html">
	</head>
	<body>
	<my-app></my-app>
	</body>
	</html>
	<!-- You can now reference the app config within your components or anything else descended
	from index.html. In this example we use the app config to set URLs for a couple of
	iron-ajax components. -->

	<link rel="import" href="../../bower_components/polymer/polymer.html">
	<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

	<dom-module id="my-app">
	<template>
	<style is="custom-style">
	:host {
	display: block;
	}
	</style>

	<iron-ajax
	id="getMarketInfoDatasource"
	params='{{getMarketInfoDatasourceParams()}}'
	handle-as="json"
	on-response="handleGetResponse">
	</iron-ajax>

	<iron-ajax
	id="createAccountService"
	params="{{getAccountCreationParams()}}"
	handle-as="json"
	on-response="handleAccountCreateResponse">
	</iron-ajax>

	</template>

	<script>
	Polymer({

	is: 'my-app',

	properties: {},

	// Page events ----------------------------------------------------
	ready: function () {
	this.$.getMarketInfoDatasource.url = appProperties.userAccountServiceGetGrowersEatersServicePath;
	this.$.createAccountService.url = appProperties.userAccountServiceCreateAccountServicePath;
	},

	getMarketInfoDatasourceParams: function () { /* Get some params */ },
	getAccountCreationParams: function() { /* Get some params */ }

	</script>
	</dom-module>