JamVueSSRPOC/serve.js

import Promise from "bluebird";
import co from "co";
import debounce from "lodash.debounce";
import compress from "compression";
import config from "./webpack.config.js";
import webpack from "webpack";
import fs from "fs";

// Set debug variables
process.env.NODE_ENV = process.env.NODE_ENV || "development";

if (!process.env.DEBUG) {
  process.env.DEBUG = "browser-sync-server:*,*:info,*:error";
}

const debug = require("debug")("browser-sync-server");
const error = debug.extend("error");
const info = debug.extend("info");

info("debug", process.env.DEBUG);

// Enable gzip
const gz = true;

const browser_sync = require("browser-sync");
const strip_ansi = require("strip-ansi");
const { spawn } = require("child_process");
const kill = require("tree-kill");

const path = require("path");

// Initialize Browsersync and webpack
const sync = browser_sync.create();

let child;

const run_build_command = command =>
  new Promise((resolve, reject) => {
    child = spawn(command, { stdio: "inherit", shell: true });
    child.on("close", (code, signal) => {
      if (code || signal) {
        reject(`Stopped - code: ${code}, signal: ${signal}`);
      } else {
        resolve();
      }
    });
  });

const kill_child = pid =>
  new Promise((resolve, reject) => {
    kill(pid, "SIGTERM", err => {
      if (err) {
        return reject(err);
      }
      return resolve();
    });
  });

function startServer() {
  sync.init(
    {
      server: path.join(__dirname, "build"),
      cors: true,
      open: true,
      logFileChanges: true,
      plugins: ["bs-fullscreen-message"],
      watchOptions: {
        awaitWriteFinish: {
          stabilityThreshold: 500,
          pollInterval: 100
        }
      },
      files: [
        {
          match: [
            path.join(__dirname, "layouts", "**", "*"),
            path.join(__dirname, "src", "content", "**", "*")
          ],
          fn: (event, file) => {
            debug(`File changed: ${file}`);
            build_site(false);
          }
        },
        {
          match: [
            path.join(__dirname, "src", "js", "**", "*.js"),
            path.join(__dirname, "src", "scss", "**", "*"),
            path.join(__dirname, "src", "svg", "**", "*")
          ],
          fn: () => build_site(true, false)
        },
        {
          match: [path.join(__dirname, "src", "js", "**", "*.vue")],
          fn: () => build_site()
        }
      ],
      middleware: [
        (req, res, next) => {
          if (!gz) return;
          const gzip = compress();
          gzip(req, res, next);
        }
      ]
    },
    (err, bs) => {
      if (err) {
        error(err);
      }
      bs.addMiddleware("*", (req, res) => {
        res.write("404 mayne");
        res.end();
      });
    }
  );
}

// Run build command
const build_site = debounce(
  (build_assets = true, build_site = true, file_filter = "") => {
    if (child && typeof child.pid) {
      info(`Killing ${child.pid}`);
      kill_child(child.pid);
    }

    info("Building Website");

    info(`build_assets: ${build_assets}`);
    info(`file: ${file_filter}`);

    if (build_assets) {
      // console.log("Webpack Started");
      // console.log("Execute webpack build here");
      run_build_command(`webpack --env ${process.env.NODE_ENV} --watch`).then(
        result => {
          sync.reload();
        }
      );
      // console.log("Webpack Finished");
      // yield run_build_command(`npm run spritesheet`);
    }

    if (build_site) {
      info("Build Started");
      const build_command = ["npm run compile"];

      run_build_command(build_command.join(" "));
      info("Build Finished");
    }

    if (!sync.active) {
      startServer();
    }

    child = void 0;
    sync.reload();
  },
  200
);

const compiler = webpack(config(process.env.NODE_ENV));

compiler.watch({}, err => {
  sync.reload();
});

compiler.hooks.afterCompile.tap("eleventy", params => {
  try {
    if (
      !fs.existsSync(
        path.resolve(__dirname, "layouts", "partials", "sprite.svg")
      )
    ) {
      require(path.resolve(__dirname, "svgsprite.js"));
    }
  } catch (err) {
    console.error(err);
  }
  sync.reload();
});

build_site(false, true);