Add frontend to be served by backend.

backend/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Vanilla JS frontend app.</title>
+    </head>
+    <body>
+        <div id="content"></div>
+        <script type="application/javascript" src="./bundle.js"></script>
+    </body>
+</html>

backend/src/js/app.js

@@ -8,6 +8,7 @@ const port = 3000;
 const app = express();
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
+app.use(express.static('backend/public'));
 
 app.use('/apps', applicationController);
 app.use('/users', userController);

backend/src/js/configuration.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const yaml = require('yaml');
 
-const configurationFile = fs.readFileSync('src/resources/application.yml', 'utf8');
+const configurationFile = fs.readFileSync('backend/src/resources/application.yml', 'utf8');
 const configuration = yaml.parse(configurationFile);
 module.exports = configuration;

backend/src/resources/application.yml

@@ -1,9 +1,9 @@
 mongodb:
   url: 'localhost'
   port: 27017
-  username: 'application_user'
-  password: 'P@ssword1'
-  database: 'db_application'
+  username: 'god'
+  password: 'P@ssword'
+  database: 'admin'
 security:
   jwt:
     secret: 5ubtcCCo7hWBqjNGtzzVKnLT1KxN9uS4D6kRZowCunZAYPmxtKy6mvgoxANe4WqLVfiVI7AZSVqZCtvlSWFwIsnXGH6lxeKG0U8Wu7Kw0jwfFOGLvlO8bXaB

docker/docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3.6"
+version: "3.0"
 services:
   mongo:
     container_name: "mongo"

frontend/src/index.js

@@ -0,0 +1,7 @@
+console.log('Hello world! ++++++');
+
+document.getElementById('content').innerHTML = `
+    <div>
+        <h1>Hello world!</h1>
+    </div>
+`;

frontend/webpack.config.js

@@ -0,0 +1,24 @@
+const webpack = require("webpack");
+const path = require("path");
+const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
+
+let config = {
+    entry: "./frontend/src/index.js",
+    output: {
+        path: path.resolve(__dirname, "../backend/public"),
+        filename: "bundle.js"
+    },
+    devServer: {
+        contentBase: path.resolve(__dirname, "../backend/public"),
+        historyApiFallback: true,
+        inline: true,
+        open: true,
+        hot: true
+    },
+    plugins: [
+        new UglifyJSPlugin(),
+        new webpack.SourceMapDevToolPlugin({})
+    ],
+    devtool: "eval-source-map"
+}
+module.exports = config;

package.json

@@ -4,8 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "nodemon ./src/js/app.js localhost 3000",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npm-run-all --parallel start-frontend start-backend",
+    "start-backend": "nodemon ./backend/src/js/app.js localhost 3000",
+    "start-frontend": "webpack --watch --config frontend/webpack.config.js"
   },
   "keywords": [],
   "author": "",
@@ -20,6 +21,11 @@
   "devDependencies": {
     "eslint": "^7.4.0",
     "eslint-plugin-node": "^11.1.0",
-    "nodemon": "^2.0.4"
+    "nodemon": "^2.0.4",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0",
+    "npm-run-all": "^4.1.5"
   }
 }