Frontent build system is ready

.gitignore

@@ -64,4 +64,7 @@ typings/
 .idea/
 
 # Database files
-db/
+db/
+
+# Cache of babel and others
+.cache/

frontend/.postcssrc

@@ -0,0 +1,16 @@
+plugins:
+    postcss-smart-import: {}
+    postcss-custom-properties: {}
+    postcss-apply: {}
+    postcss-custom-media: {}
+    postcss-media-minmax: {}
+    postcss-custom-selectors: {}
+    postcss-nested-ancestors: {}
+    postcss-nesting: {}
+    postcss-nested: {}
+    postcss-color-mod-function: {}
+    postcss-color-hex-alpha: {}
+    postcss-font-family-system-ui: {}
+    cssnano: {}
+    autoprefixer:
+        browsers: ['last 2 versions', '> 1%']

frontend/js/app.js

@@ -0,0 +1,8 @@
+import css from '../styles/main.pcss';
+
+module.exports = class Docs {
+  constructor(){
+    console.log('CodeX Docs initialized');
+
+  }
+}

frontend/styles/main.pcss

@@ -0,0 +1,7 @@
+body {
+  font-family: system-ui, Helvetica, Arial, Verdana;
+}
+
+a {
+  color: #00B7FF;
+}

package.json

@@ -6,7 +6,7 @@
     "start": "nodemon ./bin/www",
     "test": "mocha --recursive ./test",
     "lint": "eslint --fix ./**/*.js",
-    "precommit": "yarn lint && yarn test --exit"
+    "build": "webpack ./frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d"
   },
   "dependencies": {
     "body-parser": "latest",
@@ -22,13 +22,37 @@
     "uuid4": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "autoprefixer": "^9.1.3",
+    "babel": "^6.23.0",
+    "babel-loader": "^8.0.2",
+    "babel-preset-env": "^1.7.0",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.1.0",
     "eslint": "^5.3.0",
     "eslint-config-codex": "github:codex-team/eslint-config",
     "eslint-plugin-chai-friendly": "^0.4.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "husky": "^0.14.3",
     "mocha": "^5.2.0",
-    "nyc": "^12.0.2"
+    "nyc": "^12.0.2",
+    "postcss": "^7.0.2",
+    "postcss-apply": "^0.11.0",
+    "postcss-color-hex-alpha": "^3.0.0",
+    "postcss-color-mod-function": "^2.4.3",
+    "postcss-custom-media": "^6.0.0",
+    "postcss-custom-properties": "^7.0.0",
+    "postcss-custom-selectors": "^4.0.1",
+    "postcss-font-family-system-ui": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-media-minmax": "^3.0.0",
+    "postcss-nested": "^3.0.0",
+    "postcss-nested-ancestors": "^2.0.0",
+    "postcss-nesting": "^6.0.0",
+    "postcss-smart-import": "^0.7.6",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0"
   }
 }

public/dist/bundle.css

@@ -0,0 +1 @@
+body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana}a{color:#00b7ff}

public/dist/bundle.js

@@ -0,0 +1,9 @@
+var Docs=function(n){var e={};function t(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=n,t.c=e,t.d=function(n,e,o){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:o})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var r in n)t.d(o,r,function(e){return n[e]}.bind(null,r));return o},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s="./frontend/js/app.js")}({"./frontend/js/app.js":
+/*!****************************!*\
+  !*** ./frontend/js/app.js ***!
+  \****************************/
+/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nvar _main = __webpack_require__(/*! ../styles/main.pcss */ "./frontend/styles/main.pcss");\n\nvar _main2 = _interopRequireDefault(_main);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nmodule.exports = function Docs() {\n  _classCallCheck(this, Docs);\n\n  console.log(\'CodeX Docs initialized\');\n};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9mcm9udGVuZC9qcy9hcHAuanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9Eb2NzLy4vZnJvbnRlbmQvanMvYXBwLmpzPzNhMmUiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICcuLi9zdHlsZXMvbWFpbi5wY3NzJztcblxubW9kdWxlLmV4cG9ydHMgPSBjbGFzcyBEb2NzIHtcbiAgY29uc3RydWN0b3IoKXtcbiAgICBjb25zb2xlLmxvZygnQ29kZVggRG9jcyBpbml0aWFsaXplZCcpO1xuXG4gIH1cbn1cbiJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBOzs7Ozs7O0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFFQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./frontend/js/app.js\n')},"./frontend/styles/main.pcss":
+/*!***********************************!*\
+  !*** ./frontend/styles/main.pcss ***!
+  \***********************************/
+/*! no static exports found */function(module,exports){eval("// removed by extract-text-webpack-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9mcm9udGVuZC9zdHlsZXMvbWFpbi5wY3NzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vRG9jcy8uL2Zyb250ZW5kL3N0eWxlcy9tYWluLnBjc3M/NmFjOCJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyByZW1vdmVkIGJ5IGV4dHJhY3QtdGV4dC13ZWJwYWNrLXBsdWdpbiJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./frontend/styles/main.pcss\n")}});

public/stylesheets/style.css

@@ -1,8 +0,0 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
-}

stylesheets/bundle.css

@@ -0,0 +1 @@
+body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana}a{color:#00b7ff}

views/layout.twig

@@ -2,7 +2,8 @@
 <html>
   <head>
     <title>{{ title }}</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel='stylesheet' href='/dist/bundle.css' />
+    <script src="/dist/bundle.js" onload="new Docs()"></script>
   </head>
   <body>
     {% block body %}{% endblock %}

webpack.config.js

@@ -0,0 +1,60 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+/**
+ * Options for the Babel
+ */
+const babelLoader = {
+  loader: 'babel-loader',
+  options: {
+    cacheDirectory: '.cache/babel-loader',
+    presets: [
+      "env"
+    ],
+    plugins: [
+      /**
+       * Dont need to use «.default» after «export default Class Ui {}»
+       * @see  {@link https://github.com/59naga/babel-plugin-add-module-exports}
+       */
+      // 'add-module-exports',
+    ]
+  }
+};
+
+module.exports = (env) => {
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.p?css$/,
+          use: ExtractTextPlugin.extract([
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                config: {
+                  path: './frontend/'
+                }
+              }
+            }
+          ])
+        }, {
+          test: /\.js$/,
+          use: [
+            babelLoader
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new ExtractTextPlugin('bundle.css')
+    ],
+    optimization: {
+      minimize: true
+    }
+  };
+};