Frontent build system is ready (#3)

* Frontent build system is ready

* Set up linter for frontend part

* move code to /src

* update db

* upd test

* remove db

* ignore .db

.eslintignore

@@ -1 +1,2 @@
 node_modules/
+public/dist/

.gitignore

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

bin/www

@@ -3,7 +3,7 @@
 /**
  * Module dependencies.
  */
-const app = require('../app');
+const app = require('../src/app');
 const debug = require('debug')('codex.editor.docs:server');
 const http = require('http');
 
@@ -88,4 +88,4 @@ function onListening() {
   debug('Listening on ' + bind);
 }
 
-module.exports = {server, app};
+module.exports = {server, app};

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "start": "nodemon ./bin/www",
     "test": "mocha --recursive ./test",
-    "lint": "eslint --fix ./**/*.js",
+    "lint": "eslint --fix --cache ./src/**/*.js",
+    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d",
     "precommit": "yarn lint && yarn test --exit"
   },
   "dependencies": {
@@ -22,13 +23,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"
   }
 }

app.js → src/app.js

@@ -16,7 +16,7 @@ app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({extended: true}));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, '../public')));
 
 app.use('/', routes);
 // catch 404 and forward to error handler

src/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%']

src/frontend/js/app.js

@@ -0,0 +1,12 @@
+// No inspection for unused var `css` because it's used for css bundle
+// eslint-disable-next-line no-unused-vars
+import css from '../styles/main.pcss';
+
+module.exports = class Docs {
+  /**
+   * @constructor
+   */
+  constructor() {
+    console.log('CodeX Docs initialized');
+  }
+};

src/frontend/styles/main.pcss

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

models/page.js → src/models/page.js

@@ -1,4 +1,4 @@
-const {pages} = require('../database');
+const {pages} = require('../utils/database/index');
 
 /**
  * @typedef {Object} PageData
@@ -157,4 +157,4 @@ class Page {
   }
 }
 
-module.exports = Page;
+module.exports = Page;

src/utils/database/pages.js

@@ -0,0 +1,5 @@
+const Datastore = require('nedb');
+
+const db = new Datastore({filename: './.db/pages.db', autoload: true});
+
+module.exports = db;

views/layout.twig → src/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 %}

test/database.js

@@ -1,11 +1,11 @@
 const fs = require('fs');
 const {expect} = require('chai');
 
-const {class: Database} = require('../database');
+const {class: Database} = require('../src/utils/database');
 const Datastore = require('nedb');
 
 describe('Database', () => {
-  const pathToDB = './db/test.db';
+  const pathToDB = './.db/test.db';
   let nedbInstance;
   let db;
 
@@ -175,4 +175,4 @@ describe('Database', () => {
       fs.unlinkSync(pathToDB);
     }
   });
-});
+});

test/models/page.js

@@ -1,6 +1,6 @@
 const {expect} = require('chai');
-const Page = require('../../models/page');
-const {pages} = require('../../database');
+const Page = require('../../src/models/page');
+const {pages} = require('../../src/utils/database');
 
 describe('Page model', () => {
   it('Working with empty model', async () => {

test/rest/pages.js

@@ -1,5 +1,5 @@
 const {app} = require('../../bin/www');
-const model = require('../../models/page');
+const model = require('../../src/models/page');
 
 const chai = require('chai');
 const chaiHTTP = require('chai-http');
@@ -199,4 +199,4 @@ describe('Pages REST: ', () => {
     expect(success).to.be.false;
     expect(error).to.equal('Page with given id does not exist');
   });
-});
+});

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: './src/frontend/'
+                }
+              }
+            }
+          ])
+        }, {
+          test: /\.js$/,
+          use: [
+            babelLoader
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new ExtractTextPlugin('bundle.css')
+    ],
+    optimization: {
+      minimize: true
+    }
+  };
+};