block-dev-tool/server.js

#!/usr/bin/env node

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', projectDir + '/layouts');

app.get('/', async (req, res) => {
    const jsonFileName = (req.query.data) ? req.query.data : 'default';
    const data = await fs.readJson(`./data/${jsonFileName}.json`);

    res.render('page-container', data);
});

app.use(express.static('src'));

const listener = app.listen(0, () => {
    const PORT = listener.address().port;

    console.log(`The web server has started on port ${PORT}`);

    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)