Initial commit

src/client/index.tsx

@@ -0,0 +1,29 @@
+import ReactDOM from "react-dom"
+import { Provider } from "react-redux"
+import { ConnectedRouter } from "connected-react-router"
+import { RouteConfig, renderRoutes } from "react-router-config"
+import { loadableReady } from "@loadable/component"
+
+import createStore from "../store"
+import routes from "../routes"
+
+// Get the initial state from server-side rendering
+const initialState = window.__INITIAL_STATE__
+const { store, history } = createStore({ initialState })
+
+const render = (Routes: RouteConfig[]) =>
+    ReactDOM.hydrate(
+        <Provider store={store}>
+            <ConnectedRouter history={history}>{renderRoutes(Routes)}</ConnectedRouter>
+        </Provider>,
+        document.getElementById("react-view")
+    )
+
+// loadable-component setup
+loadableReady(() => render(routes as RouteConfig[]))
+
+/**
+ * A temporary workaround for Webpack v5 + HMR, why? see this issue: https://github.com/webpack-contrib/webpack-hot-middleware/issues/390
+ */
+// @ts-expect-error
+if (module.hot) module.hot.accept()