Probe runtime config before passing control to app

In order to use released XSnippet Web in various environments, we need
to support so called runtime configuration. Basically, it's nothing more
but an attempt to download some JSON and merge its values with default
settings. Runtime configuration is quite handy and could be useful, for
example, when you want to use another (non default) API server.

Author: ikalnytskyi

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