Code cleaning

Author: Thomas Roger Lux

Diff for: package.json

@@ -1,11 +1,12 @@
 {
     "name": "typescript-react-ssr-boilerplate",
-    "version": "0.2.0",
+    "version": "0.4.0",
     "license": "MIT",
     "author": "[email protected]",
     "scripts": {
-        "dev": "webpack --watch",
+        "build-dev": "webpack --watch",
         "build": "webpack",
+        "start-dev": "nodemon build/server.js",
         "start": "node build/server.js"
     },
     "dependencies": {
@@ -14,15 +15,15 @@
         "react-dom": "^16.4.1",
         "react-redux": "^5.0.7",
         "react-router-dom": "^4.3.1",
-        "redux": "^4.0.0",
-        "styled-components": "^3.4.9"
+        "redux": "^4.0.0"
     },
     "devDependencies": {
         "@types/express": "^4.16.0",
         "@types/react": "^16.4.1",
         "@types/react-dom": "^16.0.6",
         "@types/react-redux": "^6.0.2",
         "@types/react-router-dom": "^4.3.1",
+        "nodemon": "^1.18.4",
         "ts-loader": "^4.4.1",
         "typescript": "^2.9.2",
         "webpack": "^4.12.1",

Diff for: src/client/index.tsx

@@ -1,23 +1,22 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as Redux from "redux";
-import * as ReactRedux from "react-redux";
+import { Provider as ReduxProvider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import App from "common/App";
 import { changeTitle } from "common/redux/reducer/title";
-import { Store } from "common/redux/store";
 
 const preloadedState = (window as any)["__PRELOADED_STATE__"];
 delete (window as any)["__PRELOADED_STATE__"];
 
 const store = Redux.createStore(changeTitle, preloadedState);
 
 ReactDOM.hydrate(
-    <ReactRedux.Provider store={store}>
+    <ReduxProvider store={store}>
         <Router>
             <App />
         </Router>
-    </ReactRedux.Provider>,
+    </ReduxProvider>,
     document.getElementById("root")
 );

Diff for: src/common/App.tsx

@@ -2,17 +2,15 @@ import * as React from "react";
 import { Switch, Route } from "react-router-dom";
 
 import Home from "common/container/Home";
-import Test from "common/container/Test";
 
 export default class App extends React.Component {
     public render() {
         return (
-            <main>
+            <React.Fragment>
                 <Switch>
                     <Route exact path="/" component={Home} />
-                    <Route path="/test" component={Test} />
                 </Switch>
-            </main>
+            </React.Fragment>
         );
     }
 }

Diff for: src/common/container/Test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom/server";
 import * as Express from "express";
 import * as Redux from "redux";
-import * as ReactRedux from "react-redux";
+import { Provider as ReduxProvider } from "react-redux";
 import { ServerStyleSheet } from "styled-components";
 import { StaticRouter as Router } from "react-router-dom";
 
@@ -15,46 +15,49 @@ function main() {
     const express = Express();
     const port = 8080;
 
-    const store = Redux.createStore(changeTitle);
-
     express.use(Express.static("build"));
 
     express.get("/*", (req, res, next) => {
+        const store = Redux.createStore(changeTitle);
         const sheet = new ServerStyleSheet();
+
         const appHTML = ReactDOM.renderToString(
             sheet.collectStyles(
-                <ReactRedux.Provider store={store}>
+                <ReduxProvider store={store}>
                     <Router location={req.path} context={{}}>
                         <App />
                     </Router>
-                </ReactRedux.Provider>
+                </ReduxProvider>
             )
         );
-
-        const styleTags = sheet.getStyleTags();
-        const preloadedState = JSON.stringify(store.getState()).replace(
+        const appCSS = sheet.getStyleTags();
+        const appInitialState = JSON.stringify(store.getState()).replace(
             /</g,
             "\\u003c"
         );
 
-        const fullHTML = `
+        res.send(`
             <!DOCTYPE html>
             <html>
                 <head>
                     <title>TypeScript ReactJS SSR App</title>
+                    <style>
+                        body {
+                            margin: 0px;
+                            padding: 0px;
+                        }
+                        ${appCSS}
+                    </style>
                 </head>
                 <body>
-                    <div id="root">${appHTML}</div>
+                    <main id="root">${appHTML}</main>
                     <script>
-                        window["__PRELOADED_STATE__"] = ${preloadedState}
+                        window["__PRELOADED_STATE__"] = ${appInitialState}
                     </script>
                     <script type="application/javascript" src="bundle.js"></script>
-                    ${styleTags}
                 </body>
             </html>
-        `;
-
-        res.send(fullHTML);
+        `);
         res.end();
         next();
     });