Static site: watch and rebuild config automatically during development

build-utils/config-loader.js

@@ -0,0 +1,77 @@
+const walk = require("object-walk");
+const Handlebars = require("handlebars");
+const fs = require('fs-extra');
+const path = require('path');
+
+// This loader is used to listen to changes in the config file during development.
+// Any config changes will be detected and the config (but not the rest of the
+// static site) will be rebuilt. This loader only rebuilds the English version
+// of the config; to test other languages in development it will be necessary
+// to produce a full production build:
+//   npm run build
+// Or, to build in production mode and also start the dev server:
+//   NODE_ENV=production npm start
+
+const configGettextRegex = /^_\(/;
+
+Handlebars.registerHelper("serialize", function(json) {
+  if (!json) return false;
+  return JSON.stringify(json);
+});
+
+module.exports = function(source) {
+
+  source = source.substring(17);
+
+  let datasetSiteUrls = {}
+    config = JSON.parse(source);
+
+  Object.keys(process.env).forEach(function(key) {
+    if (key.endsWith("SITE_URL")) {
+      datasetSiteUrls[key] = process.env[key];
+    }
+  });
+
+  // If we have dataset urls defined in the .env file, overwrite the default
+  // urls found in the config here.
+  config.map.layers.forEach((layer, i) => {
+    if (datasetSiteUrls[layer.id.toUpperCase() + "_SITE_URL"]) {
+      config.map.layers[i].url =
+        datasetSiteUrls[layer.id.toUpperCase() + "_SITE_URL"];
+    }
+  });
+
+  // Strip out gettext syntax; we don't perform any localization of the config
+  // in this loader. Full localization is performed by the production build.
+  walk(config, (val, prop, obj) => {
+    if (typeof val === "string") {
+      if (configGettextRegex.test(val)) {
+        val = val
+          .replace(configGettextRegex, "")
+          .replace(/\)$/, "");
+      }
+    }
+
+    obj[prop] = val;
+  });
+
+  const templateSource = fs.readFileSync(
+    path.resolve(
+      __dirname,
+      "config-template.hbs"
+    ),
+    "utf8"
+  );
+  const template = Handlebars.compile(templateSource);
+  outputFile = template({
+    config: config,
+  });
+
+  outputPath = path.resolve(
+    __dirname,
+    "../www/dist/config-en_US.js"
+  );
+  fs.writeFileSync(outputPath, outputFile);
+
+  return source;
+}

build-utils/config-template.hbs

@@ -0,0 +1,46 @@
+(function(S, $){
+  S.Config = {
+    defaultPlaceTypeName: '{{ default_place_type }}',
+    userToken: (
+      S.bootstrapped.currentUser ?
+      'user:' + S.bootstrapped.currentUser.id :
+      "{{ user_token_json }}"),
+    app:        {{#serialize config.app}}{{/serialize}},
+    place:      {{#serialize config.place}}{{/serialize}},
+    placeTypes: {{#serialize config.place_types}}{{/serialize}},
+    cluster:    {{#serialize config.cluster}}{{/serialize}},
+    survey:     {{#serialize config.survey}}{{/serialize}},
+    support:    {{#serialize config.support}}{{/serialize}},
+    map:        {{#serialize config.map}}{{/serialize}},
+    activity:   {{#serialize config.activity}}{{/serialize}},
+    sidebar:    {{#serialize config.sidebar}}{{/serialize}},
+    leaflet_sidebar: {{#serialize config.leaflet_sidebar}}{{/serialize}},
+    pages:           {{#serialize config.pages}}{{/serialize}},
+    story:           {{#serialize config.story}}{{/serialize}},
+    rightSidebar:    {{#serialize config.right_sidebar}}{{/serialize}},
+    filters:         {{#serialize config.filters}}{{/serialize}},
+    datasets:        {{#serialize config.datasets}}{{/serialize}}
+  };
+  $(function() {
+    // Ready set go!
+    window.app = new Shareabouts.App({
+      activity: [],
+      defaultPlaceTypeName: S.Config.defaultPlaceTypeName,
+      userToken: S.Config.userToken,
+      appConfig: S.Config.app,
+      placeConfig: S.Config.place,
+      placeTypes: S.Config.placeTypes,
+      cluster: S.Config.cluster,
+      sidebarConfig: S.Config.sidebar,
+      rightSidebarConfig: S.Config.rightSidebar,
+      surveyConfig: S.Config.survey,
+      supportConfig: S.Config.support,
+      mapConfig: S.Config.map,
+      storyConfig: S.Config.story,
+      activityConfig: S.Config.activity,
+      pagesConfig: S.Config.pages,
+      filters: S.Config.filters,
+      datasetsConfig: S.Config.datasets
+    });
+  });
+}(Shareabouts, jQuery));