From a91bb80e9f55c73ed8abb9168256d2dd3bc00189 Mon Sep 17 00:00:00 2001
From: Ihor Kalnytskyi <ihor@kalnytskyi.com>
Date: Tue, 22 May 2018 09:34:50 +0300
Subject: [PATCH] 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.
---
 src/components/App.jsx | 43 +++++++++++++++++++++++++++++++++---------
 webpack.config.js      |  6 +++++-
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 6c02699..a49bfc3 100644
--- a/src/components/App.jsx
+++ b/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
diff --git a/webpack.config.js b/webpack.config.js
index 88fa8f3..940d63c 100644
--- a/webpack.config.js
+++ b/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