@modyo/cli/lib/widget/start/index.js

Modyo Command Line Interface

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackRootPlugin = require('html-webpack-root-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const Webpack = require('webpack')
const path = require('path')
const chalk = require('chalk')
const WebpackDevServer = require('webpack-dev-server')
const openBrowser = require('react-dev-utils/openBrowser')
const WebpackMerge = require('webpack-merge')
const { choosePort, createCompiler, prepareUrls } = require('react-dev-utils/WebpackDevServerUtils')
const baseWebpackConfig = require('./config/webpack.standalone.config')
const {
  getModyoProjectConfiguration,
  getModyoSiteConfiguration,
  getAuthToken,
  webpackProjectSetup
} = require('../../helpers/')

const PROTOCOL = process.env.protocol || 'http'
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4200
const HOST = process.env.HOST || '0.0.0.0'

/*
* TODO: div element is created in head
*/

/*
* Generate a unique webpack config with entry points relatives to the widget path
*/
const createWebpackConfig = ((widget, opts) => WebpackMerge(
  {
    entry: [
      path.resolve(widget.entrypoint),
      `webpack-dev-server/client?http://${HOST}:${DEFAULT_PORT}`
    ]
  },
  {
    plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'templates', 'index.ejs'),
        title: `${widget.name} - Modyo CLI`,
        ...opts
      }),
      new HtmlWebpackRootPlugin(widget.key),
      new Webpack.HotModuleReplacementPlugin()
    ]
  },
  baseWebpackConfig,
  webpackProjectSetup()
))

const createWebpackDevServerConfig = () => ({
  disableHostCheck: true,
  quiet: true,
  https: false,
  host: HOST,
  inline: true,
  historyApiFallback: {
    disableDotRule: true
  }
})
const buildAppUrl = (port) => `${PROTOCOL}://${HOST}:${port}`

const runServer = (widgetObj, opts, logger) => {
  const webpackConfig = createWebpackConfig(widgetObj, opts)
  const devServerConfig = createWebpackDevServerConfig()

  choosePort(HOST, DEFAULT_PORT).then((PORT) => {
    const urls = prepareUrls('http', HOST, PORT)
    const compiler = createCompiler(
      {
        webpack: Webpack,
        config: webpackConfig,
        appName: widgetObj.name,
        urls,
        useYarn: true
      }
    )
    const devServer = new WebpackDevServer(compiler, devServerConfig)
    devServer.listen(PORT, HOST, (err) => {
      if (err) {
        logger.info(err)
        process.exit(1)
      }
      logger.info(chalk.cyan(`Starting the development server on ${buildAppUrl(PORT)}...\n`))
      openBrowser(buildAppUrl(PORT))
    })
  })
}

/*
    * Start Widget
    */
module.exports = ((argWidget, logger) => {
  const conf = getModyoProjectConfiguration(logger)
  logger.info(`Starting the Modyo-cli service ${chalk.red(conf.widget.name)} on standalone mode`)
  const { widget } = conf
  return getAuthToken(conf)
    .then((token) => getModyoSiteConfiguration(conf, token)
      .then((site) => {
        const opts = {
          public_css: site.public_css,
          public_js: site.public_js
        }
        runServer(widget, opts, logger)
      }))
})