From 062ce58cf8aba38281a38be24c13ec034e1359f1 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 31 Jan 2018 10:57:01 -0700 Subject: [PATCH 1/2] ensure dynamic imports use proper path/url --- client/coral-framework/constants/config.js | 11 ++++++++ client/coral-framework/helpers/publicPath.js | 13 +++++++++ client/coral-framework/services/bootstrap.js | 28 +++----------------- webpack.config.js | 14 +++++++--- 4 files changed, 37 insertions(+), 29 deletions(-) create mode 100644 client/coral-framework/constants/config.js create mode 100644 client/coral-framework/helpers/publicPath.js diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js new file mode 100644 index 000000000..5ffc59ee2 --- /dev/null +++ b/client/coral-framework/constants/config.js @@ -0,0 +1,11 @@ +// This is always loaded in the body of the page, meaning that the dom element +// for this data blob is always loaded when we render this piece. +const CONFIG_ELEMENT = document.querySelector('#data'); + +// Parse the configuration from that element if it exists, otherwise, an empty +// object. +const CONFIG = CONFIG_ELEMENT ? JSON.parse(CONFIG_ELEMENT.textContent) : {}; + +// Export the expected fields. +export const LIVE_URI = CONFIG.LIVE_URI; +export const STATIC_URL = CONFIG.STATIC_URL; diff --git a/client/coral-framework/helpers/publicPath.js b/client/coral-framework/helpers/publicPath.js new file mode 100644 index 000000000..d67166de9 --- /dev/null +++ b/client/coral-framework/helpers/publicPath.js @@ -0,0 +1,13 @@ +/* global __webpack_public_path__ */ // eslint-disable-line no-unused-vars + +import { STATIC_URL } from 'coral-framework/constants/config'; + +// 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/'; diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js index b1014f2db..b56872985 100644 --- a/client/coral-framework/services/bootstrap.js +++ b/client/coral-framework/services/bootstrap.js @@ -1,3 +1,4 @@ +import { LIVE_URI } from 'coral-framework/constants/config'; 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,10 +83,8 @@ 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) { + let liveUri = null; + if (LIVE_URI == null) { // The protocol must match the origin protocol, secure/insecure. const protocol = location.protocol === 'https:' ? 'wss' : 'ws'; diff --git a/webpack.config.js b/webpack.config.js index 3367727f5..6a018caba 100644 --- a/webpack.config.js +++ b/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; }, {} From c4cddefcffa9c8aa10c7cfaf572034573df0b57b Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 31 Jan 2018 11:25:43 -0700 Subject: [PATCH 2/2] abstracted config to service --- client/coral-framework/constants/config.js | 11 ----------- client/coral-framework/helpers/publicPath.js | 5 ++++- client/coral-framework/services/bootstrap.js | 6 +++--- .../services/staticConfiguration.js | 18 ++++++++++++++++++ 4 files changed, 25 insertions(+), 15 deletions(-) delete mode 100644 client/coral-framework/constants/config.js create mode 100644 client/coral-framework/services/staticConfiguration.js diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js deleted file mode 100644 index 5ffc59ee2..000000000 --- a/client/coral-framework/constants/config.js +++ /dev/null @@ -1,11 +0,0 @@ -// This is always loaded in the body of the page, meaning that the dom element -// for this data blob is always loaded when we render this piece. -const CONFIG_ELEMENT = document.querySelector('#data'); - -// Parse the configuration from that element if it exists, otherwise, an empty -// object. -const CONFIG = CONFIG_ELEMENT ? JSON.parse(CONFIG_ELEMENT.textContent) : {}; - -// Export the expected fields. -export const LIVE_URI = CONFIG.LIVE_URI; -export const STATIC_URL = CONFIG.STATIC_URL; diff --git a/client/coral-framework/helpers/publicPath.js b/client/coral-framework/helpers/publicPath.js index d67166de9..57b6b7d15 100644 --- a/client/coral-framework/helpers/publicPath.js +++ b/client/coral-framework/helpers/publicPath.js @@ -1,6 +1,9 @@ /* global __webpack_public_path__ */ // eslint-disable-line no-unused-vars -import { STATIC_URL } from 'coral-framework/constants/config'; +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 diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js index b56872985..66da3ff29 100644 --- a/client/coral-framework/services/bootstrap.js +++ b/client/coral-framework/services/bootstrap.js @@ -1,4 +1,4 @@ -import { LIVE_URI } from 'coral-framework/constants/config'; +import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration'; import { createStore } from './store'; import { createClient, apolloErrorReporter } from './client'; import pym from './pym'; @@ -83,8 +83,8 @@ export async function createContext({ token, }); - let liveUri = null; - if (LIVE_URI == null) { + let { LIVE_URI: liveUri } = getStaticConfiguration(); + if (liveUri == null) { // The protocol must match the origin protocol, secure/insecure. const protocol = location.protocol === 'https:' ? 'wss' : 'ws'; diff --git a/client/coral-framework/services/staticConfiguration.js b/client/coral-framework/services/staticConfiguration.js new file mode 100644 index 000000000..25eb606c7 --- /dev/null +++ b/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; +};