Merge pull request #10 from imbhargav5/fix-2

Add server routing

Author: imbhargav5

package.json

@@ -3,6 +3,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "express": "^4.15.4",
     "prop-types": "^15.5.10",
+    "pug": "^2.0.0-rc.3",
     "react": "next",
     "react-dom": "next",
     "react-redux": "^5.0.6",
@@ -22,6 +23,7 @@
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.5",
     "html-webpack-plugin": "^2.30.1",
+    "html-webpack-pug-plugin": "^0.2.1",
     "nodemon": "^1.11.0",
     "npm-run-all": "^4.0.2",
     "react-hot-loader": "next",

src/client/app.js

@@ -6,6 +6,9 @@ import Header from "./components/Header";
 import Core from "./components/Core";
 import Footer from "./components/Footer";
 import store from "./store";
+import Home from "./containers/Home";
+import About from "./containers/About";
+import NotFoundPage from "./containers/NotFound";
 import styled, { injectGlobal } from "styled-components";
 
 // Global styles
@@ -24,10 +27,10 @@ const Root = styled.div``;
 const RootMain = styled.div`min-height: 600px;`;
 
 // Fetch bundles
-const Home = bundle(() => import("./containers/Home"));
-const About = bundle(() => import("./containers/About"));
+// Dynamic imports
+// These components don't have server rendering at the moment
+// TO-DO : Add server rendering if possible
 const Counter = bundle(() => import("./containers/Counter"));
-const NotFoundPage = bundle(() => import("./containers/NotFound"));
 
 export default class App extends Component {
   render() {

src/client/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { BrowserRouter } from "react-router-dom";
-import { render } from "react-dom";
+// hydrate is responsible for server rendering going forward
+import { hydrate as render } from "react-dom";
 import App from "./app";
 
 render(

src/server/app.js

@@ -20,10 +20,19 @@ const port = process.env.PORT || 8888;
 const staticPath = path.join(__dirname, "../../", "static");
 app.use(express.static(staticPath));
 
+// set view engine
+app.set("view engine", "pug");
+// set views directory
+if (isDevelopment) {
+  app.set("views", path.join(__dirname, "templates"));
+} else {
+  app.set("views", path.join(__dirname, "../../", "static/templates"));
+}
+
 //Root html template
-let indexFile = path.join(__dirname, "templates/index.dev.html");
+let indexTemplate = "index.dev.pug";
 if (!isDevelopment) {
-  indexFile = path.join(__dirname, "../../index.html");
+  indexTemplate = "index";
 }
 
 // add routes
@@ -37,9 +46,12 @@ app.get("*", (req, res) => {
       </Router>
     )
   );
-  // it will contain classnames
-  // console.log(html);
-  res.sendFile(indexFile);
+  const styleTags = sheet.getStyleTags();
+  // This renders html as well as a concatenated string list of style tags
+  res.render(indexTemplate, {
+    content: html,
+    styles: styleTags
+  });
 });
 
 // start app

src/server/templates/index.dev.html

@@ -0,0 +1,13 @@
+doctype html
+html
+    head
+        meta(charset="utf-8")
+        title Summer
+        link(rel="shortcut icon", type="image/png", href="/logo.png")
+        link(rel="shortcut icon", type="image/png", href="http://localhost:8888/favicon.png")
+        != styles
+    body
+        #app!=content
+        script(src="http://localhost:8080/manifest.bundle.js", charset="utf-8")
+        script(src="http://localhost:8080/vendor.bundle.js", charset="utf-8")
+        script(src="http://localhost:8080/main.bundle.js", charset="utf-8")

src/server/templates/index.dev.pug

@@ -0,0 +1,10 @@
+doctype html
+html
+    head
+        meta(charset="utf-8")
+        title Summer
+        link(rel="shortcut icon", type="image/png", href="/logo.png")
+        link(rel="shortcut icon", type="image/png", href="http://localhost:8888/favicon.png")
+        != styles
+    body
+        #app!=content

src/server/templates/index.prod.html

@@ -1,5 +1,6 @@
 import webpack from "webpack";
 import path from "path";
+import HtmlWebpackPugPlugin from "html-webpack-pug-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import CopyWebpackPlugin from "copy-webpack-plugin";
 
@@ -51,11 +52,12 @@ export default env => {
       ifDev(new webpack.HotModuleReplacementPlugin()),
       ifProd(
         new HtmlWebpackPlugin({
-          title: "pubg",
-          filename: "index.html",
-          template: path.join(__dirname, "src/server/templates/index.prod.html")
+          title: "Summer",
+          filename: "templates/index.pug",
+          template: path.join(__dirname, "src/server/templates/index.prod.pug")
         })
       ),
+      ifProd(new HtmlWebpackPugPlugin()),
       new webpack.optimize.CommonsChunkPlugin({
         name: "vendor",
         minChunks: function(module) {