Added the basic js/css frontend to the express app

2026-03-31 06:24:00 -04:00 · 2018-02-26 22:52:19 +01:00
parent 91bad12f52
commit cd93e31bb5
8 changed files with 107 additions and 1 deletions
--- a/app/controllers/Web/BaseController.js
+++ b/app/controllers/Web/BaseController.js
@@ -1,11 +1,16 @@
 const config = require("../../config/config");
+const assets = require("../../helpers/modules/Assets");

 class BaseController {
    constructor() {
        this.baseConfig = {
            config: config,
            hostname: '',
-            baseUrl: ''
+            baseUrl: '',
+            assets: {
+                js: false,
+                css: false
+            }
        }
    }

@@ -19,6 +24,9 @@ class BaseController {
        this.baseConfig.hostname = request.hostname;
        this.baseConfig.baseUrl = `${request.protocol}://${request.hostname}${config.application.basePath}`;

+        this.baseConfig.assets.js = assets["main.js"];
+        this.baseConfig.assets.css = assets["main.css"];
+
        return Object.assign(this.baseConfig, pageSpecificConfig);
    }
 }
--- a/app/helpers/modules/Assets.js
+++ b/app/helpers/modules/Assets.js
@@ -0,0 +1,3 @@
+const fs = require("fs");
+
+module.exports = JSON.parse(fs.readFileSync(`${__dirname}/../../../public/dist/rev-manifest.json`));
--- a/app/helpers/modules/Socket.js
+++ b/app/helpers/modules/Socket.js
@@ -0,0 +1,30 @@
+class Socket {
+    constructor(server) {
+        this.io = require('socket.io')(server);
+
+        this.init();
+    }
+
+    /**
+     * Init the socket connection
+     */
+    init() {
+        this.io.on('connection', function (socket) {
+            /**
+             * Triggered when a socket disconnects
+             */
+            socket.on('disconnect', function () {
+                console.log(`[SOCKET] Client disconnected! ID: ${socket.id}`);
+            });
+
+            console.log(`[SOCKET] New client connected! ID: ${socket.id}`);
+        });
+
+        /**
+         * Start listening on the right port/host for the Socket.IO server
+         */
+        console.log('[SYSTEM] Socket.IO started !');
+    }
+}
+
+module.exports = Socket;
--- a/app/server.js
+++ b/app/server.js
@@ -11,6 +11,7 @@ const browsersupport = require('express-browsersupport');
 * Import own packages
 */
 const config = require('./config/config');
+const socket = require('./helpers/modules/Socket');
 const webRouter = require('./routers/Web');
 const apiRouter = require('./routers/Api');
 const indexController = require('./controllers/Web/IndexController');
@@ -99,6 +100,11 @@ const server = app.listen(config.application.port, config.application.bind, () =
    console.log(`[NODE] App is running on: ${config.application.bind}:${config.application.port}`);
 });

+/**
+ * Init socket connection
+ */
+global.socket = new socket(server);
+
 /**
 * Handle nodemon shutdown
 */
--- a/app/views/index.ejs
+++ b/app/views/index.ejs
@@ -11,5 +11,9 @@
        </main>

        <% include ./partials/footer.ejs %>
+        <script>
+            var expressConfig = {port: <%= config.application.port %>, hostname: '<%= hostname %>', baseUrl: '<%= baseUrl %>'};
+        </script>
+        <script src="/dist/<%= assets.js %>" type="application/javascript"></script>
    </body>
 </html>
--- a/app/views/partials/head.ejs
+++ b/app/views/partials/head.ejs
@@ -22,3 +22,5 @@
        "url": "<%= baseUrl %>"
    }
 </script>
+
+<link href="/dist/<%= assets.css %>" rel="stylesheet" type="text/css" />
--- a/package-lock.json
+++ b/package-lock.json
@@ -905,6 +905,11 @@
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.3.tgz",
      "integrity": "sha512-MsAhsUW1GxCdgYSO6tAfZrNapmUKk7mWx/k5mFY/A1gBtkaCaNapTg+FExCw1r9yeaZhqx/xPg43xgTFH6KL5w=="
    },
+    "base64id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-1.0.0.tgz",
+      "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY="
+    },
    "bcrypt-pbkdf": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -2040,6 +2045,30 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
      "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA="
    },
+    "engine.io": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.1.5.tgz",
+      "integrity": "sha512-D06ivJkYxyRrcEe0bTpNnBQNgP9d3xog+qZlLbui8EsMr/DouQpf5o9FzJnWYHEYE0YsFHllUv2R1dkgYZXHcA==",
+      "requires": {
+        "accepts": "1.3.4",
+        "base64id": "1.0.0",
+        "cookie": "0.3.1",
+        "debug": "3.1.0",
+        "engine.io-parser": "2.1.2",
+        "uws": "9.14.0",
+        "ws": "3.3.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
    "engine.io-client": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.1.5.tgz",
@@ -6768,6 +6797,23 @@
        "hoek": "2.16.3"
      }
    },
+    "socket.io": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.0.4.tgz",
+      "integrity": "sha1-waRZDO/4fs8TxyZS8Eb3FrKeYBQ=",
+      "requires": {
+        "debug": "2.6.9",
+        "engine.io": "3.1.5",
+        "socket.io-adapter": "1.1.1",
+        "socket.io-client": "2.0.4",
+        "socket.io-parser": "3.1.3"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz",
+      "integrity": "sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs="
+    },
    "socket.io-client": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.0.4.tgz",
@@ -7744,6 +7790,12 @@
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
    },
+    "uws": {
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/uws/-/uws-9.14.0.tgz",
+      "integrity": "sha512-HNMztPP5A1sKuVFmdZ6BPVpBQd5bUjNC8EFMFiICK+oho/OQsAJy5hnIx4btMHiOk8j04f/DbIlqnEZ9d72dqg==",
+      "optional": true
+    },
    "validate-npm-package-license": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
+    "socket.io": "^2.0.4",
    "socket.io-client": "^2.0.4",
    "webpack": "^3.11.0",
    "webpack-manifest-plugin": "^1.3.2"