Merge pull request #1331 from coralproject/public-path

Dynamic Public Path

client/coral-framework/helpers/publicPath.js

@@ -0,0 +1,16 @@
+/* global __webpack_public_path__ */ // eslint-disable-line no-unused-vars
+
+import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration';
+
+// Load the static url from the static configuration.
+const { STATIC_URL } = getStaticConfiguration();
+
+// Update the static url for the imported public path so dynamically imported
+// chunks will use the correct path as defined by the process.env.STATIC_URL
+// that is provided dynamically from the template. This is a better solution to
+// embedding the environment variables as changes won't require recompilation.
+//
+// The __webpack_public_path__ can be referenced:
+// https://webpack.js.org/configuration/output/#output-publicpath
+//
+__webpack_public_path__ = STATIC_URL + 'static/';

client/coral-framework/services/bootstrap.js

@@ -1,3 +1,4 @@
+import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration';
 import { createStore } from './store';
 import { createClient, apolloErrorReporter } from './client';
 import pym from './pym';
@@ -22,27 +23,6 @@ import { createHistory } from 'coral-framework/services/history';
 import { createIntrospection } from 'coral-framework/services/introspection';
 import introspectionData from 'coral-framework/graphql/introspection.json';
 
-/**
- * getStaticConfiguration will return a singleton of the static configuration
- * object provided via a JSON DOM element.
- */
-const getStaticConfiguration = (() => {
-  let staticConfiguration = null;
-  return () => {
-    if (staticConfiguration != null) {
-      return staticConfiguration;
-    }
-
-    const configElement = document.querySelector('#data');
-
-    staticConfiguration = JSON.parse(
-      configElement ? configElement.textContent : '{}'
-    );
-
-    return staticConfiguration;
-  };
-})();
-
 /**
  * getAuthToken returns the active auth token or null
  *   Note: this method does not have access to the cookie based token used by
@@ -103,8 +83,6 @@ export async function createContext({
     token,
   });
 
-  // Try to get an overrided liveUri from the static config, if none is found,
-  // build it.
   let { LIVE_URI: liveUri } = getStaticConfiguration();
   if (liveUri == null) {
     // The protocol must match the origin protocol, secure/insecure.

client/coral-framework/services/staticConfiguration.js

@@ -0,0 +1,18 @@
+/**
+ * getStaticConfiguration will return a singleton of the static configuration
+ * object provided via a JSON DOM element.
+ */
+let staticConfiguration = null;
+export const getStaticConfiguration = () => {
+  if (staticConfiguration != null) {
+    return staticConfiguration;
+  }
+
+  const configElement = document.querySelector('#data');
+
+  staticConfiguration = JSON.parse(
+    configElement ? configElement.textContent : '{}'
+  );
+
+  return staticConfiguration;
+};

webpack.config.js

@@ -54,7 +54,7 @@ const config = {
   target: 'web',
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: '/static/',
+    publicPath: '',
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
   },
@@ -249,13 +249,19 @@ const applyConfig = (entries, root = {}) =>
     config,
     {
       entry: entries.reduce(
-        (entry, { name, path, disablePolyfill = false }) => {
+        (entry, { name, path: modulePath, disablePolyfill = false }) => {
+          const entries = [
+            path.join(__dirname, 'client/coral-framework/helpers/publicPath'),
+          ];
           if (disablePolyfill) {
-            entry[name] = path;
+            entries.push(modulePath);
           } else {
-            entry[name] = ['babel-polyfill', path];
+            entries.unshift('babel-polyfill');
+            entries.push(modulePath);
           }
 
+          entry[name] = entries;
+
           return entry;
         },
         {}