Probe runtime config before passing control to app

src/components/App.jsx

@@ -3,17 +3,42 @@ import React from 'react'
 import Header from './Header'
 import Main from './Main'
 import Sidebar from './Sidebar'
+import Spinner from './common/Spinner'
+import conf from '../conf'
 
 import '../styles/App.styl'
 
-const App = () => (
-  [
-    <Header key="header" />,
-    <div className="content" key="content">
-      <Sidebar />
-      <Main />
-    </div>,
-  ]
-)
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isLoading: true,
+    }
+
+    fetch(process.env.RUNTIME_CONF_URI)
+      .then((response) => {
+        if (response.status === 404) {
+          return {}
+        }
+        return response.json()
+      })
+      .then(json => Object.assign(conf, json))
+      .then(() => this.setState({ isLoading: false }))
+  }
+
+  render() {
+    if (this.state.isLoading) {
+      return <Spinner />
+    }
+
+    return [
+      <Header key="header" />,
+      <div className="content" key="content">
+        <Sidebar />
+        <Main />
+      </div>,
+    ]
+  }
+}
 
 export default App

webpack.config.js

@@ -109,6 +109,9 @@ module.exports = () => {
       'xml',
       'yaml',
       'django']
+  const assetsPath = process.env.ASSETS_PATH == null
+    ? '/'
+    : process.env.ASSETS_PATH
 
   const conf = {
     // Assume we are targeting production environments by default; the value
@@ -145,7 +148,7 @@ module.exports = () => {
     output: {
       filename: '[name].[chunkhash].js',
       path: path.resolve(__dirname, 'dist'),
-      publicPath: process.env.ASSET_PATH || '/',
+      publicPath: assetsPath,
     },
 
     module: {
@@ -219,6 +222,7 @@ module.exports = () => {
       new webpack.EnvironmentPlugin({
         API_BASE_URI: null,
         RAW_SNIPPET_URI_FORMAT: null,
+        RUNTIME_CONF_URI: `${assetsPath}conf.json`,
       }),
 
       // Similar to JavaScript, we use [chunkhash] in order to invalidate