ing

package.json

@@ -85,7 +85,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-router-redux": "^4.0.8",
+    "react-router-redux": "next",
     "react-tap-event-plugin": "^3.0.2",
     "recharts": "^1.0.0-beta.6",
     "redux": "^3.7.2",

src/ts/@overflow/webapp/index.tsx

@@ -1,4 +1,139 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import {
+  applyMiddleware,
+  compose,
+  createStore,
+  GenericStoreEnhancer,
+  Middleware,
+  Store,
+} from 'redux';
+
+import {
+  Provider,
+} from 'react-redux';
+
+import {
+  ConnectedRouter,
+  routerMiddleware,
+} from 'react-router-redux';
+
+import {
+  AppContainer,
+} from 'react-hot-loader';
+
+declare let module: { hot: any };
+
+declare global {
+  interface Window {
+    devToolsExtension: () => any;
+  }
+}
 
 class WebAppApplication {
+  private static isProduction:boolean = process.env.NODE_ENV === 'production' ? true : false;
+  private static useReduxDevTools:boolean = window.devToolsExtension && !WebAppApplication.isProduction ? true : false;
 
+  private container: HTMLElement;
+  private store: Store<any>;
+  private history: History;
+
+  public constructor() {
+    this.container = document.getElementById('appContainer');
+  }
+
+  public async run(): Promise<void> {
+    try {
+      this.renderLoading();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  private renderLoading(): void {
+    ReactDOM.render(
+        <div style={{
+          width: '100vw',
+          height: '100vh',
+          backgroundColor: 'white',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          }}>
+            <h1>Loading...</h1>
+        </div>,
+        this.container,
+    );
+  }
+
+  private renderError(e: Error): void {
+    ReactDOM.render(
+        <div style={{
+          width: '100vw',
+          height: '100vh',
+          backgroundColor: 'white',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          }}>
+            <h1>{e.message}</h1>
+        </div>,
+        this.container,
+    );
+  }
+
+  private renderApp(): void {
+    WebAppApplication.isProduction ? this.renderProduction() : this.rederDevelopment();
+  }
+  private renderProduction(): void {
+    ReactDOM.render(
+      <Provider store={this.store}>
+        <ConnectedRouter history={this.history}>
+
+        </ConnectedRouter>
+      </Provider>,
+      this.container,
+    );
+  }
+
+  private rederDevelopment(): void {
+    if (module.hot) {
+      module.hot.accept('./pages/webapp', async () => {
+        const NextApp = (await import('./pages/webapp')).default;
+        ReactDOM.render(
+          <AppContainer>
+            <Provider store={this.store}>
+              <ConnectedRouter history={this.history}>
+                <NextApp />
+              </ConnectedRouter>
+            </Provider>
+          </AppContainer>
+          ,
+          this.container,
+        );
+      });
+    }
+
+    ReactDOM.render(
+      <AppContainer>
+        <Provider store={this.store}>
+          <ConnectedRouter history={this.history}>
+
+          </ConnectedRouter>
+        </Provider>
+      </AppContainer>
+      ,
+      this.container,
+    );
+  }
+
+
+
+  public static main(): void {
+    let webapp = new WebAppApplication();
+    webapp.run();
+  }
 }
+
+WebAppApplication.main();

src/ts/@overflow/webapp/pages/webapp.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+export interface Props {
+}
+export interface State {
+}
+
+class WebApp extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <b>Hello</b>
+    );
+  }
+}
+
+export default WebApp;