🚀 feature: Add SSR to the backend, upgrade babel to latest

package.json

@@ -28,7 +28,7 @@
         "npm-check": "5.9.0"
     },
     "dependencies": {
-        "xss-filters": "1.2.7",
-        "concurrently": "4.1.0"
+        "concurrently": "4.1.0",
+        "xss-filters": "1.2.7"
     }
 }

packages/ferreiro-client/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/lib
 
 # misc
 .DS_Store

packages/ferreiro-client/package.json

@@ -2,6 +2,7 @@
   "name": "@ferreiro/client",
   "version": "0.0.1",
   "private": true,
+  "main": "lib/lib.bundle.js",
   "scripts": {
     "lint": "eslint src",
     "lint:fix": "eslint --fix src",
@@ -17,7 +18,8 @@
     "@ferreiro/design-system": "1.0.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-router-dom": "5.0.0"
+    "react-router-dom": "5.0.0",
+    "react-router-server": "4.2.3"
   },
   "devDependencies": {
     "@babel/core": "7.4.3",

packages/ferreiro-client/src/App.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {Switch, Route, withRouter} from 'react-router'
+
+function PageHome() {
+    return (<div>Welcome to the home!</div>)
+}
+
+function PagePost() {
+    return <div>This is page post rendered in React!</div>
+}
+function PageNotFound() {
+    return <div>Not found!</div>
+}
+
+export function AppWithRouter() {
+    return (
+        <Switch>
+            <Route
+                path='/'
+                exact
+                render={PageHome}
+            />
+            <Route
+                path='/blog/:permalink'
+                exact
+                render={PagePost}
+            />
+            <Route
+                render={PageNotFound}
+            />
+        </Switch>
+    )
+}
+
+export default withRouter(AppWithRouter)

packages/ferreiro-client/src/app.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {Switch, Route, withRouter} from 'react-router'
+
+function PageHome() {
+    return (<div>Welcome to the home!</div>)
+}
+
+function PagePost() {
+    return <div>This is page post rendered in React!</div>
+}
+function PageNotFound() {
+    return <div>Not found!</div>
+}
+
+export function AppWithRouter() {
+    return (
+        <Switch>
+            <Route
+                path='/'
+                exact
+                render={PageHome}
+            />
+            <Route
+                path='/blog/:permalink'
+                exact
+                render={PagePost}
+            />
+            <Route
+                render={PageNotFound}
+            />
+        </Switch>
+    )
+}
+
+export default withRouter(AppWithRouter)

packages/ferreiro-client/src/index.js

@@ -2,12 +2,15 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import {BrowserRouter} from 'react-router-dom'
 
-import App from './App'
-import {Blog} from './pages/blog/Blog'
+import App from './app'
 
-ReactDOM.render(
-    <Blog />,
-    document.getElementById('blog')
+function Header() {
+    return <div>This is a react notification!</div>
+}
+
+ReactDOM.hydrate(
+    <Header />,
+    document.getElementById('header')
 )
 
 ReactDOM.render(

packages/ferreiro-client/src/server.js

@@ -0,0 +1,10 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import React from 'react'
+import App from './app'
+import {renderToString} from 'react-router-server'
+
+export function render(props) {
+    return renderToString(<App {...props} />)
+}

packages/ferreiro-client/webpack.config.js

@@ -5,20 +5,22 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
 
-const DESTINATION_PATH = path.join(__dirname, '../ferreiro-server/dist');
+const LIB_PATH = path.join(__dirname, './lib')
+const DIST_PATH = path.join(__dirname, '../ferreiro-server/dist')
 
 module.exports = {
     entry: {
         client: './src/index.js',
+        lib: './src/server.js',
     },
     output: {
         filename: '[name].bundle.js',
-        path: DESTINATION_PATH,
+        path: LIB_PATH,
     },
     // This is required to make the hot reload work for the web...
     target: 'web',
     devServer: {
-        contentBase: DESTINATION_PATH,
+        contentBase: DIST_PATH,
         compress: true,
         port: 9000
     },
@@ -31,7 +33,11 @@ module.exports = {
         }),
         new CopyWebpackPlugin([{
           from: './images/**/**',
-          to: DESTINATION_PATH
+          to: DIST_PATH
+        }]),
+        new CopyWebpackPlugin([{
+          from: `${LIB_PATH}/client.bundle.js`,
+          to: DIST_PATH
         }]),
         new ImageminPlugin()
     ],

packages/ferreiro-server/babel.config.js

@@ -0,0 +1,19 @@
+module.exports = function (api) {
+    api.cache(true)
+
+    const presets = [
+        [ '@babel/env', { 'targets': { 'node': 'current' } } ],
+        '@babel/preset-react'
+    ]
+
+    const plugins = [
+        '@babel/plugin-transform-runtime',
+        '@babel/plugin-proposal-class-properties'
+    ]
+
+    return { 
+        ignore: [/node_modules/],
+        presets,
+        plugins
+    }
+}

packages/ferreiro-server/gulpTasks.js

@@ -93,7 +93,7 @@ module.exports.buildJs = function buildJs (opts) {
         .src(opts.src)
         .pipe(cache.filter()) // remember files
         .pipe(babel({
-            presets: ['es2015'] // compile ne ones
+            presets: ['@babel/env'] // compile ne ones
         }))
         .pipe(concat(opts.filename))
         .pipe(uglify())

packages/ferreiro-server/package.json

@@ -30,23 +30,25 @@
     "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn watch\"",
     "lint": "eslint api web setup ./gulpfile.js",
     "lint:fix": "eslint --fix api web setup ./gulpfile.js ./gulpTasks.js",
-    "server": "DEBUG=ferreiro:* nodemon ./bin/www --exec babel-node --presets babel-preset-env",
+    "server": "DEBUG=ferreiro:* nodemon --exec yarn babel-node --config-file ./babel.config.js -- ./bin/www",
     "start": "yarn server",
     "watch": "gulp watch"
   },
   "dependencies": {
+    "@babel/core": "7.7.2",
+    "@babel/node": "7.7.0",
+    "@babel/plugin-proposal-class-properties": "7.7.0",
+    "@babel/preset-env": "7.7.1",
+    "@babel/preset-react": "7.7.0",
+    "@babel/runtime": "7.7.2",
     "aws-sdk": "^2.404.0",
-    "babel-cli": "6.26.0",
-    "babel-core": "6.26.3",
-    "babel-loader": "8.0.5",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-es2015": "6.24.1",
     "bcrypt": "^3.0.6",
     "bluebird": "^3.5.0",
     "body-parser": "^1.18.2",
     "compression": "^1.7.1",
     "connect-flash": "^0.1.1",
     "cookie-parser": "^1.4.4",
+    "core-js": "3.4.1",
     "debug": "^3.1.0",
     "eslint": "^6.1.0",
     "express": "^4.16.1",
@@ -71,6 +73,7 @@
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
     "pug": "^2.0.0-beta6",
+    "regenerator-runtime": "0.13.3",
     "replaceall": "^0.1.6",
     "request": "^2.83.0",
     "sanitize-html": "^1.14.1",
@@ -79,12 +82,14 @@
     "xss-filters": "1.2.7"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "7.6.2",
+    "babel-plugin-transform-es2015-modules-amd": "6.24.1",
     "bower": "^1.8.8",
     "concurrently": "^4.1.0",
     "del": "^3.0.0",
     "gulp": "4.0.2",
     "gulp-autoprefixer": "^7.0.0",
-    "gulp-babel": "^7.0.0",
+    "gulp-babel": "8.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-cssnano": "^2.1.2",
     "gulp-file-cache": "0.0.1",

packages/ferreiro-server/web/UIComponents/layouts/blog.layout.pug

@@ -0,0 +1 @@
+extends ./react.layout.pug