Initial

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env"], "@babel/react"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = 120

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "comma-dangle": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.idea
+*.iml
+*.log
+package-lock.json

build/webpack.base.babel.js

@@ -0,0 +1,50 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from 'path';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+export default {
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../dist/public'),
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+      {
+        test: /\.s?css$/,
+        use: [isProd ? MiniCssExtractPlugin.loader : 'style-loader', {
+          loader: 'css-loader',
+          options: isProd ? {} : {
+            sourceMap: true
+          }
+        }, {
+          loader: 'sass-loader',
+          options: isProd ? {} : {
+            sourceMap: true
+          }
+        }]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'src/server/index.html'
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: isProd ? '[name].[hash].css' : '[name].css',
+      chunkFilename: isProd ? '[id].[hash].css' : '[id].css',
+    })
+  ]
+};

build/webpack.dev.babel.js

@@ -0,0 +1,15 @@
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import base from './webpack.base.babel';
+
+export default merge(base, {
+  mode: 'development',
+  devtool: 'cheap-module-eval-source-map',
+  entry: [
+    'webpack-hot-middleware/client',
+    './src/client/index.jsx'
+  ],
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
+});

build/webpack.prod.babel.js

@@ -0,0 +1,15 @@
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
+import base from './webpack.base.babel';
+
+export default merge(base, {
+  mode: 'production',
+  entry: './src/client/index.jsx',
+  output: {
+    filename: '[name].[hash].js'
+  },
+  plugins: [
+    new UglifyJSPlugin()
+  ]
+});

build/webpack.server.babel.js

@@ -0,0 +1,28 @@
+import nodeExternals from 'webpack-node-externals';
+import path from 'path';
+
+export default {
+  mode: 'production',
+  target: 'node',
+  entry: './index.js',
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'server-bundle.js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+    ]
+  },
+  // https://webpack.js.org/configuration/externals/#externals
+  // https://github.com/liady/webpack-node-externals
+  externals: nodeExternals(),
+}

index.js

@@ -0,0 +1 @@
+require('./src/server');

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "web-youtube-later",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nodemon index.js --exec babel-node --watch src/server build",
+    "build": "rm -rf dist/* && npm run build:client && npm run build:server",
+    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.prod.babel.js",
+    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.babel.js",
+    "start": "cross-env NODE_ENV=production node dist/server-bundle.js",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.46",
+    "@babel/node": "^7.0.0-beta.46",
+    "@babel/preset-env": "^7.0.0-beta.46",
+    "@babel/preset-react": "^7.0.0-beta.46",
+    "babel-core": "^7.0.0-0",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "8.0.0-beta.2",
+    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^22.4.3",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "nodemon": "^1.17.3",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack-cli": "^2.0.15",
+    "webpack-merge": "^4.1.2",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "dependencies": {
+    "compression": "^1.7.2",
+    "express": "^4.16.3",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-hot-loader": "^4.1.2",
+    "webpack": "^4.6.0",
+    "webpack-dev-middleware": "^3.1.3",
+    "webpack-hot-middleware": "^2.22.1"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|less|sass|scss)$": "<rootDir>/test/client/__mocks__/styleMock.js",
+      "\\.(gif|ttf|eot|svg)$": "<rootDir>/test/client/__mocks__/fileMock.js"
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/test/client/testSetup.js"
+  }
+}

src/client/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", {
+      "targets": {
+        "browsers": ["last 2 versions"]
+      },
+      "modules": false
+    }]
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env"], "@babel/react"]
+    }
+  }
+}

src/client/App.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { hot } from 'react-hot-loader';
+import Header from './layout/Header';
+import Card from './components/Card';
+
+const App = () => (
+  <div>
+    <Header />
+    <Card />
+  </div>
+);
+
+export default hot(module)(App);

src/client/components/Card.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Card.scss';
+
+const Card = () => (
+  <div className="Card">Card</div>
+);
+
+export default Card;

src/client/components/Card.scss

@@ -0,0 +1,3 @@
+.Card {
+  background-color: lightblue;
+}

src/client/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.scss';
+
+const render = (Component) => {
+  ReactDOM.render(<Component />, document.getElementById('root'));
+};
+
+render(App);
+
+// Webpack Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    // if you are using harmony modules ({modules:false})
+    render(App);
+  });
+}

src/client/index.scss

@@ -0,0 +1,4 @@
+body, html {
+  margin: 0;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
+}

src/client/layout/Header.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Header.scss';
+
+const Header = () => (
+  <header className="Header">
+    Header
+  </header>
+);
+
+export default Header;

src/client/layout/Header.scss

@@ -0,0 +1,6 @@
+$header-color: #bbbbbb;
+
+.Header {
+  background-color: $header-color;
+  padding: 20px;
+}

src/server/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>React Hot Express</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

src/server/index.js

@@ -0,0 +1,50 @@
+import compression from 'compression';
+import path from 'path';
+import webpack from 'webpack';
+import express from 'express';
+import configDev from '../../build/webpack.dev.babel';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const app = express();
+const compiler = webpack(configDev);
+
+if (!isProd) {
+  app.use(require('webpack-dev-middleware')(compiler, {
+    publicPath: configDev.output.publicPath,
+  }));
+
+  app.use(require('webpack-hot-middleware')(compiler));
+
+  app.get('*', (req, res, next) => {
+    const filename = path.join(compiler.outputPath, 'index.html');
+    compiler.outputFileSystem.readFile(filename, (err, result) => {
+      if (err) {
+        return next(err);
+      }
+      res.set('content-type', 'text/html');
+      res.send(result);
+      res.end();
+    });
+  });
+} else {
+  app.use(compression());
+  app.use(express.static('dist/public', {
+    setHeaders(res, resPath) {
+      // do not set Cache-Control for index page
+      const isIndexFile = resPath.endsWith('/index.html');
+      if (!isIndexFile) {
+        res.setHeader('Cache-Control', '86400');
+      }
+    }
+  }));
+}
+
+app.listen(3000, (err) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+
+  console.log('Listening at http://localhost:3000/');
+});

test/client/App.spec.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import App from '../../src/client/App';
+
+test('#render <App />', () => {
+  shallow(<App />);
+});

test/client/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

test/client/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

test/client/testSetup.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });