Fix some issues

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+build
 public
 *.log
 content

main.d976fa3798efce567981.css

@@ -1,10 +0,0 @@
-bodyhtml{height:100%}body{font-family:Open Sans,sans-serif;color:#2f2f2f;margin:0}h1,h2,h3,h4,h5,h6{font-family:Open Sans Condensed,sans-serif}
-#Home__coverPage___3awuA{background:linear-gradient(140deg,rgba(10,108,245,.6) 20%,rgba(0,0,0,.9)),url(/245160ae8c20fbd72132e8f19ab5c90d.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fdfdfd;background-position:50%;background-repeat:no-repeat}#Home__coverPage___3awuA.Home__coverPageFull___1Ma8Y{height:100vh;width:100%}#Home__coverPageName___Ono33{font-size:5em}#Home__coverPageName___Ono33 a,#Home__coverPageName___Ono33 a:hover{color:#fdfdfd;text-decoration:none}.Home__social___31MFC{text-align:center}.Home__social___31MFC a{color:#fdfdfd;display:inline-block;margin:10px}.Home__menuLinks___3J0vz ul{list-style:none;margin-left:0;padding:10px}.Home__menuLinks___3J0vz ul li{margin:5px}.Home__menuLinks___3J0vz ul li a{color:#fdfdfd;text-decoration:none;font-size:1.4em}
-.Blog__postDate___2syXo{margin-right:50px}.Blog__postTitle___5dx5x{color:#144a98;text-decoration:none;text-transform:capitalize;font-family:Open Sans Condensed,sans-serif;font-size:1.2em}.Blog__postsWrapper___15Pu7{margin-top:20px}.Blog__postListItem___3babS{margin:8px}.Blog__postListItem___3babS td{vertical-align:top}
-.content__contentWrapper___3JR0e{display:inline-block;overflow:auto;box-sizing:border-box;padding:20px;width:100%}.content__contentWrapper___3JR0e a{color:#144a98}@media (min-width:992px){.content__contentWrapper___3JR0e{width:960px}}.content__content___2hWvT{box-sizing:border-box;text-align:left}
-
-.Post__postContent___2qxpB{clear:both}.Post__postContent___2qxpB h1,.Post__postContent___2qxpB h2,.Post__postContent___2qxpB h4,.Post__postContent___2qxpB h5,.Post__postContent___2qxpB h6{color:#2f2f2f}.Post__postDate___mOa_I{float:right}.Post__postDate___mOa_I h3{font-weight:400}
-.Wrapper__centerContent___3I7iS{text-align:center}
-.Spinner__spinnerWrapper___1rE4f{width:100%;display:flex;justify-content:center}.Spinner__ldsEllipsis___MQ__N{display:inline-block;position:relative;width:64px;height:64px;margin:0 auto}.Spinner__ldsEllipsis___MQ__N div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#2f2f2f;animation-timing-function:cubic-bezier(0,1,1,0)}.Spinner__ldsEllipsis___MQ__N div:first-child{left:6px;animation:Spinner__lds-ellipsis1___kmvdD .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(2){left:6px;animation:Spinner__lds-ellipsis2___1KPxc .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(3){left:26px;animation:Spinner__lds-ellipsis2___1KPxc .6s infinite}.Spinner__ldsEllipsis___MQ__N div:nth-child(4){left:45px;animation:Spinner__lds-ellipsis3___25QMr .6s infinite}@keyframes Spinner__lds-ellipsis1___kmvdD{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes Spinner__lds-ellipsis3___25QMr{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes Spinner__lds-ellipsis2___1KPxc{0%{transform:translate(0)}to{transform:translate(19px)}}
-.Header__mainHeader___2VDf9{border-left:5px solid #144a98;padding:5px;margin:0;text-align:left}.Header__mainHeader___2VDf9 h1{margin:0}
-.Navbar__navbar___2l-xR{background:linear-gradient(140deg,rgba(10,108,245,.6) 20%,rgba(0,0,0,.9)),url(/245160ae8c20fbd72132e8f19ab5c90d.jpg) no-repeat 50% fixed;color:#fdfdfd;background-position:50%;background-repeat:no-repeat;text-align:left;overflow:auto}h2{color:#fdfdfd;padding-left:5px}.Navbar__social___5OYU1{display:inline-block;float:right;vertical-align:bottom}.Navbar__social___5OYU1 a{color:#fdfdfd;display:inline-block;margin:10px}.Navbar__links___2YPE8{display:inline-block;float:left}.Navbar__links___2YPE8 ul{list-style:none}.Navbar__links___2YPE8 ul li{font-family:Open Sans Condensed,sans-serif;display:inline;margin:5px}.Navbar__links___2YPE8 ul li a{color:#fdfdfd;text-decoration:none}.Navbar__nameLink___2o3NS{font-size:1.4em}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "portfolio",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "portfolio",
   "main": "index.js",
   "scripts": {
     "build": "NODE_ENV=production webpack -p --progress",
-    "start": "NODE_ENV=production node ./server.js"
+    "start": "NODE_ENV=production node ./build/server.js"
   },
   "keywords": [
     "porfolio",

src/app-client.js

@@ -5,13 +5,11 @@ import {App} from './components';
 
 const AppClient = () => (
   <Router>
-    <App data={window.__INITIAL_DATA__}/>
+    <App />
   </Router>
 )
 
-window.onload = () => {
+hydrate(
-  hydrate(
+  <AppClient />,
-    <AppClient />,
+  document.getElementById('root')
-    document.getElementById('root')
+);
-  );
-};

src/components/App.js

@@ -1,9 +1,9 @@
 import { NotFoundWrapper } from '.'
 import React, { Component } from 'react'
 import routes from '../utils/routes'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Link, Redirect, Switch } from 'react-router-dom'
 
-class App extends Component {
+export default class App extends Component {
   render() {
     return (
       <div>
@@ -24,20 +24,3 @@ class App extends Component {
     )
   }
 }
-
-// import React from 'react';
-// import { Route, Switch } from 'react-router-dom';
-// import { NotFoundWrapper } from '.';
-// import { MainContainer, PostContainer } from '../containers';
-//
-// export const App = () => (
-//   <div>
-//     <Switch>
-//       <Route exact path="/" component={MainContainer} />
-//       <Route path="/post/:postname" component={PostContainer} />
-//       <Route component={NotFoundWrapper} />
-//     </Switch>
-//   </div>
-// );
-//
-// export default App;

src/containers/MainContainer.js

@@ -13,22 +13,6 @@ export default class BlogContainer extends Component {
     }
   }
 
-  componentDidMount() {
-    axios.get('/api/about').then((res) => {
-      this.setState({
-        isLoadingAbout: false,
-        about: res.data,
-      });
-    })
-
-    axios.get('/api/blog').then((res) => {
-      this.setState({
-        isLoadingBlog: false,
-        posts: res.data,
-      });
-    })
-  }
-
   render() {
     return (
       <div>

src/containers/PostContainer.js

@@ -12,25 +12,6 @@ export default class PostContainer extends Component {
     };
   }
 
-  componentDidMount() {
-    const url = '/api/post/' + this.props.match.params.postname;
-
-    axios.get(url).then((res) => {
-      if (res.data.error) {
-        this.setState({
-          error: true,
-        });
-      }
-      else {
-        this.setState({
-          error: false,
-          isLoading: false,
-          post: res.data,
-        });
-      }
-    })
-  }
-
   render() {
 
     if (this.state.error) {

src/server.js

@@ -1,28 +1,27 @@
-require('babel-register');
+import express from 'express'
-var path = require('path');
+import fs from 'fs'
+import {serverRender} from './utils/serverRender'
 
-var app = new (require('express'))();
+const port = process.env.PORT || 3000;
-var port = process.env.PORT || 3000;
+const app = express()
 
-const sass = require('node-sass');
+// const sass = require('node-sass');
+//
+// require('css-modules-require-hook')({
+//   generateScopedName: '[name]__[local]___[hash:base64:5]',
+//   extensions: ['.scss', '.css'],
+//   preprocessCss: (data, filename) => sass.renderSync({
+//       data,
+//       file: filename,
+//   }).css
+// });
 
-require('css-modules-require-hook')({
+// const filename = './src/utils/data.json';
-  generateScopedName: '[name]__[local]___[hash:base64:5]',
+// const dataStub = {"posts": [], "other": []};
-  extensions: ['.scss', '.css'],
+// fs.writeFileSync(filename, JSON.stringify(dataStub));
-  preprocessCss: (data, filename) => sass.renderSync({
-      data,
-      file: filename,
-  }).css
-});
 
-var fs = require('fs');
+// require('./utils/scanner')();
-var filename = './src/utils/data.json';
-var dataStub = {"posts": [], "other": []};
-fs.writeFileSync(filename, JSON.stringify(dataStub));
 
-require('./utils/scanner')();
-
-var serverRender = require('./utils/serverRender');
 app.get("*", serverRender);
 
 app.listen(port, function(error) {

src/utils/routes.js

@@ -1,6 +1,6 @@
 import { MainContainer, PostContainer } from '../containers'
 import { NotFoundWrapper } from '../components';
-import getData from './api'
+import { getData } from './api'
 
 const routes = [
   {

src/utils/serverRender.js

@@ -1,11 +1,11 @@
 //import 'babel-polyfill'
 import React from 'react'
 import { renderToString } from 'react-dom/server'
-import { StaticRouter as Router } from 'react-router-dom'
+import { StaticRouter as Router, matchPath } from 'react-router-dom'
 import { App } from '../components/App'
 import routes from './routes'
 
-function serverRender(req, res) {
+export function serverRender(req, res, next) {
 
   const activeRoute = routes.find((route) => matchPath(req.url, route)) || {}
 
@@ -15,26 +15,17 @@ function serverRender(req, res) {
 
   promise.then((data) => {
     const markup = renderToString(
-      <Router location={req.url} context={context}>
+      <Router location={req.url} context={{}}>
         <App />
       </Router>,
     );
-  })
 
-  let markup = '';
+    res.status(200).send(renderFullPage(markup));
-  let status = 200;
 
-  const context = {}
+  }).catch(next)
-  markup = renderToString(
-    <Router location={req.url} context={context}>
-      <App />
-    </Router>,
-  );
-
-  return res.status(status).send(renderFullPage(markup, manifest));
 }
 
-function renderFullPage(html, manifest) {
+function renderFullPage(html) {
   return `
     <!DOCTYPE html>
     <html>
@@ -49,11 +40,9 @@ function renderFullPage(html, manifest) {
           <link href="bundle.css" rel="stylesheet">
       </head>
       <body>
-        <div id="root">${process.env.NODE_ENV === 'production' ? html : `<div>${html}</div>`}</div>
+        <div id="root">${html}</div>
         <script src="bundle.js" async></script>
       </body>
     </html>
     `
 }
-
-module.exports = serverRender;

webpack.config.js

@@ -8,46 +8,6 @@ const ManifestPlugin = require('webpack-manifest-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const nodeExternals = require('webpack-node-externals')
 
-const commonConfig = {
-  rules: [
-    {
-      test: /\.js$/,
-      use: [
-        'babel-loader'
-      ],
-      exclude: '/node_modules/'
-    },
-    {
-      test: /\.scss$/,
-      use: [
-        MiniCssExtractPlugin.loader,
-        {
-          loader: 'css-loader',
-          options: {
-            modules: true,
-            importLoaders: 2,
-            localIdentName: '[name]__[local]___[hash:base64:5]'
-          }
-        },
-        {
-          loader: "postcss-loader"
-        },
-        {
-          loader: 'sass-loader'
-        }
-      ]
-    },
-    {
-      test: /\.(png|jpg)$/,
-      exclude: /node_modules/,
-      loader: 'url-loader',
-      options: {
-        limit: 8192
-      }
-    },
-  ]
-}
-
 const browserConfig = {
   mode: 'production',
   context: resolve(__dirname, 'src'),
@@ -61,20 +21,48 @@ const browserConfig = {
     filename: '[name].[contenthash].js',
     publicPath: '/static/'
   },
-  module: commonConfig,
+  module: {
-  optimization: {
+    rules: [
-    minimizer: [
+      {
-      new UglifyJsPlugin({
+        test: /\.js$/,
-        cache: true,
+        use: [
-        parallel: true,
+          'babel-loader'
-        sourceMap: true // set to true if you want JS source maps
+        ],
-      }),
+        exclude: '/node_modules/'
-      new OptimizeCSSAssetsPlugin({})
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 2,
+              localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: "postcss-loader"
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        exclude: /node_modules/,
+        loader: 'url-loader',
+        options: {
+          limit: 8192
+        }
+      },
     ]
   },
   plugins: [
     new webpack.DefinePlugin({__isBrowser__: "true"}),
-    new CleanWebpackPlugin(['public/static'], {}),
+    new CleanWebpackPlugin(['public/static', 'build'], {}),
     new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
     // new CompressionPlugin({}),
     // new ManifestPlugin(),
@@ -86,16 +74,52 @@ const serverConfig = {
   target: 'node',
   externals: [nodeExternals()],
   output: {
-    path: __dirname,
+    path: resolve(__dirname, 'build'),
     filename: 'server.js',
     publicPath: '/'
   },
-  module: commonConfig,
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          'babel-loader'
+        ],
+        exclude: '/node_modules/'
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 2,
+              localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: "postcss-loader"
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        exclude: /node_modules/,
+        loader: 'url-loader',
+        options: {
+          limit: 8192
+        }
+      },
+    ]
+  },
   plugins: [
     new webpack.DefinePlugin({
       __isBrowser__: "false"
     }),
-    new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
   ]
 }