react-ark-tools/scripts/run.js

Boilerplate and tooling for JavaScript application development with React

/**
 * React App SDK (https://github.com/kriasoft/react-app)
 *
 * Copyright © 2015-present Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

const fs = require('fs');
const ejs = require('ejs');
const webpack = require('webpack');

module.exports = config => {
  let count = 0;
  return new Promise(resolve => {
    const bs = require('browser-sync').create();

    const compiler = webpack(config.webpack);
    // Node.js middleware that compiles application in watch mode with HMR support
    // http://webpack.github.io/docs/webpack-dev-middleware.html
    const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
      publicPath: config.webpack.output.publicPath,
      stats: config.webpack.stats,
    });

    compiler.plugin('done', stats => {
      // Generate index.html page
      const bundle = stats.compilation.chunks.find(x => x.name === 'main').files[0];
      const template = fs.readFileSync('./index.ejs', 'utf8');
      const render = ejs.compile(template, { filename: './index.ejs' });
      const output = render({ debug: true, bundle: `/dist/${bundle}`, config: config.webpack });
      fs.writeFileSync('./public/index.html', output, 'utf8');

      // Launch Browsersync after the initial bundling is complete
      // For more information visit https://browsersync.io/docs/options
      if (++count === 1) {
        bs.init({
          port: process.env.PORT || 3000,
          ui: { port: Number(process.env.PORT || 3000) + 1 },
          server: {
            baseDir: 'public',
            middleware: [
              webpackDevMiddleware,
              require('webpack-hot-middleware')(compiler),
              require('connect-history-api-fallback')(),
            ],
          },
        }, resolve);
      }
    });
  });
};