Update babel

.babelrc

@@ -1,10 +1,11 @@
 {
   "presets":[
-      "es2015",
-      "react"
+      "@babel/preset-env",
+      "@babel/react"
   ],
   "plugins":[
-    "transform-object-rest-spread",
-    "transform-runtime"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-transform-template-literals"
   ]
 }

package.json

@@ -15,7 +15,6 @@
   "license": "MIT",
   "dependencies": {
     "async": "^2.5.0",
-    "axios": "^0.17.0",
     "express": "^4.13.4",
     "front-matter": "^2.2.0",
     "jsonfile": "^4.0.0",
@@ -24,27 +23,21 @@
     "node-sass": "^4.9.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-router-dom": "^4.1.1",
-    "webpack-node-externals": "^1.7.2"
+    "react-router-dom": "^4.1.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.7.6",
-    "babel-jest": "*",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.7.5",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-react-hmre": "^1.1.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.7.2",
-    "babel-runtime": "^6.26.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/plugin-transform-template-literals": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.2.0",
+    "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^0.1.19",
     "compression-webpack-plugin": "^1.1.11",
     "css-loader": "^0.28.11",
-    "css-modules-require-hook": "^4.0.6",
+    "css-modules-require-hook": "^4.2.3",
     "file-loader": "^1.1.11",
     "mini-css-extract-plugin": "^0.4.0",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
@@ -56,6 +49,7 @@
     "webpack-cli": "^2.1.2",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.18.0",
-    "webpack-manifest-plugin": "^2.0.3"
+    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-node-externals": "^1.7.2"
   }
 }

src/app-client.js

@@ -3,13 +3,9 @@ import {hydrate} from 'react-dom';
 import {BrowserRouter as Router} from 'react-router-dom';
 import {App} from './components';
 
-const AppClient = () => (
+hydrate(
   <Router>
     <App />
-  </Router>
-)
-
-hydrate(
-  <AppClient />,
+  </Router>,
   document.getElementById('root')
 );

src/cmrh.conf.js

@@ -0,0 +1,10 @@
+var sass = require('node-sass');
+
+module.exports = {
+  generateScopedName: '[name]__[local]___[hash:base64:5]',
+  extensions: ['.scss', '.css'],
+  preprocessCss: (data, filename) => sass.renderSync({
+      data,
+      file: filename,
+  }).css
+}

src/containers/MainContainer.js

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import axios from 'axios';
 import {About, Blog, Home, Wrapper} from '../components';
 
 export default class MainContainer extends Component {

src/containers/PostContainer.js

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import axios from 'axios';
 import {Post, Wrapper, NotFoundPage} from '../components';
 
 export default class PostContainer extends Component {

src/server.js

@@ -1,27 +1,18 @@
 import express from 'express'
 import fs from 'fs'
 import {serverRender} from './utils/serverRender'
-
+import csshook from 'css-modules-require-hook/preset'
 const port = process.env.PORT || 3000;
 const app = express()
 
-// 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
-// });
-
 // const filename = './src/utils/data.json';
 // const dataStub = {"posts": [], "other": []};
 // fs.writeFileSync(filename, JSON.stringify(dataStub));
 
 // require('./utils/scanner')();
 
+app.use('/static', express.static('public/static'))
+
 app.get("*", serverRender);
 
 app.listen(port, function(error) {

src/utils/serverRender.js

@@ -4,6 +4,7 @@ import { renderToString } from 'react-dom/server'
 import { StaticRouter as Router, matchPath } from 'react-router-dom'
 import { App } from '../components'
 import routes from './routes'
+import manifest from './manifest.json'
 
 export function serverRender(req, res, next) {
 
@@ -20,9 +21,14 @@ export function serverRender(req, res, next) {
       </Router>,
     );
 
+    console.log(req.url)
+    console.log(markup)
+    console.log()
+
     res.status(200).send(renderFullPage(markup));
 
   }).catch(next)
+
 }
 
 function renderFullPage(html) {
@@ -30,18 +36,16 @@ function renderFullPage(html) {
     <!DOCTYPE html>
     <html>
       <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Matúš Námešný</title>
           <!-- Google Fonts -->
           <link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700&amp;subset=latin-ext" rel="stylesheet" rel="preload">
           <!-- Font Awesome -->
           <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
           <!-- Stylesheet -->
-          <link href="bundle.css" rel="stylesheet">
       </head>
       <body>
         <div id="root">${html}</div>
-        <script src="bundle.js" async></script>
+        <script src="static/bundle.js" async></script>
       </body>
     </html>
     `

webpack.config.js

@@ -18,9 +18,11 @@ const browserConfig = {
   },
   output: {
     path: resolve(__dirname, 'public/static'),
-    filename: '[name].[contenthash].js',
+    filename: '[name].js',
+    // filename: '[name].[contenthash].js',
     publicPath: '/static/'
   },
+  devtool: "eval-source-map",
   module: {
     rules: [
       {
@@ -33,13 +35,13 @@ const browserConfig = {
       {
         test: /\.scss$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          //MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
               modules: true,
-              importLoaders: 2,
-              localIdentName: '[name]__[local]___[hash:base64:5]'
+              importLoaders: 2
+              // localIdentName: '[name]__[local]___[hash:base64:5]'
             }
           },
           {
@@ -63,9 +65,9 @@ const browserConfig = {
   plugins: [
     new webpack.DefinePlugin({__isBrowser__: "true"}),
     new CleanWebpackPlugin(['public/static', 'build'], {}),
-    new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
+    //new MiniCssExtractPlugin(),
     // new CompressionPlugin({}),
-    // new ManifestPlugin(),
+    new ManifestPlugin(),
   ]
 }
 
@@ -94,6 +96,7 @@ const serverConfig = {
             loader: 'css-loader',
             options: {
               modules: true,
+              exportOnlyLocals: true,
               importLoaders: 2,
               localIdentName: '[name]__[local]___[hash:base64:5]'
             }