Added BrowserSync

.gitignore

@@ -11,4 +11,5 @@ deploy-*.sh
 # Custom
 assets/css/**/*.min.css*
 assets/css-old/**/*.min.css*
-components/**/*.min.css*
+components/**/*.min.css*
+config.js

config/default.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    "mode": "production"
+}

config/development.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    "mode": "development"
+}

package.json

@@ -1,11 +1,16 @@
 {
   "name": "axe-web-component",
   "version": "1.0.0",
-  "scripts": {},
+  "scripts": {
+    "start": "NODE_ENV=production node server.js",
+    "dev": "NODE_ENV=development node server.js"
+  },
   "license": "ISC",
   "main": "server.js",
   "type": "module",
   "dependencies": {
+    "browser-sync": "^2.27.9",
+    "config": "^3.3.7",
     "express": "^4.17.3",
     "express-handlebars": "^6.0.4",
     "fs-extra": "^10.0.1"

server.js

@@ -3,17 +3,31 @@
 import express from 'express';
 import {create} from 'express-handlebars';
 import fs from 'fs-extra';
+import browserSync from 'browser-sync';
+import config from 'config';
+
+/**
+ * Constants
+ */
+
+const isDev = config.get('mode') === 'development';
+const projectDir = isDev ? '.' : './node_modules/axe-web-component';
+console.log(isDev);
+
+/**
+ * Init server
+ */
 
 const app = express();
 
 const hbs = create({
     extname: '.hbs', defaultLayout: false,
     partialsDir: ['.'],
-})
+});
 
 app.engine('.hbs', hbs.engine);
 app.set('view engine', '.hbs');
-app.set('views', './layouts');
+app.set('views', projectDir + '/layouts');
 
 app.get('/', async (req, res) => {
     const jsonFileName = (req.query.data) ? req.query.data : 'default';
@@ -24,16 +38,47 @@ app.get('/', async (req, res) => {
 
 app.use(express.static('src'));
 
-const PORT = 3002;
-app.listen(PORT, () => {
+const listener = app.listen(0, () => {
+    const PORT = listener.address().port;
+
     console.log(`The web server has started on port ${PORT}`);
-});
 
-// TODO:
-// Add Gulp for CSS/JS Styling
-// Add Browsersync that will refresh the page on changes
-// Top Panel with options to switch data (select input)
-// Options to resize the page and test Responsiveness (select input)
+    const bs = browserSync.create();
 
+    bs.watch("src/**/*.js", function (event, file) {
+        if (isDev) {
+            console.log(event, file);
+        }
 
+        bs.reload("*.js");
+    });
 
+    bs.watch("src/**/*.css", function (event, file) {
+        if (isDev) {
+            console.log(event, file);
+        }
+
+        bs.reload("*.css");
+    });
+
+    bs.watch("src/**/*.hbs", function (event, file) {
+        if (isDev) {
+            console.log(event, file);
+        }
+
+        bs.reload();
+    });
+
+    bs.init({
+        proxy: `http://localhost:${PORT}`,
+    });
+});
+
+// TODO:
+//
+// Add Gulp for CSS/JS Styling
+// [v] Add Browsersync that will refresh the page on changes
+//
+// Breakpoints and data options will come from backend server.
+// - Top Panel with options to switch data (select input)
+// - Options to resize the page and test Responsiveness (select input)