require('./check-versions')(); const { readSettings } = require('../SettingsHelper'); const settings = readSettings(); const config = require('../config'); if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV); } const opn = require('opn'); const path = require('path'); const express = require('express'); const webpack = require('webpack'); const proxyMiddleware = require('http-proxy-middleware'); const webpackConfig = require('./webpack.dev.conf'); const history = require('connect-history-api-fallback'); // default port where dev server listens for incoming traffic const port = process.env.PORT || config.dev.port; // automatically open browser, if not set will be false const autoOpenBrowser = !!config.dev.autoOpenBrowser; // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware const proxyTable = config.dev.proxyTable; const app = express(); const compiler = webpack(webpackConfig); const devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true, }); const hotMiddleware = require('webpack-hot-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, log: () => {}, }); // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', (compilation) => { compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => { hotMiddleware.publish({ action: 'reload' }); cb(); }); }); // proxy api requests Object.keys(proxyTable).forEach((context) => { let options = proxyTable[context]; if (typeof options === 'string') { options = { target: options }; } app.use(proxyMiddleware(options.filter || context, options)); }); const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory); // handle fallback for HTML5 history API const indexPath = path.posix.join(staticPath, 'index.html'); app.use( history({ index: indexPath, }), ); // serve webpack bundle output app.use(devMiddleware); // enable hot-reload and state-preserving // compilation error display app.use(hotMiddleware); // serve pure static assets app.use(staticPath, express.static('./static')); const uri = `http://localhost:${port}${staticPath}`; let _resolve; const readyPromise = new Promise((resolve) => { _resolve = resolve; }); console.log('> Starting dev server...'); devMiddleware.waitUntilValid(() => { console.log(`> Listening at ${uri}\n`); // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri); } _resolve(); }); const configPath = path.posix.join(staticPath, 'config'); app.get(configPath, (req, res) => { res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate'); res.header('Expires', '-1'); res.header('Pragma', 'no-cache'); res.send(settings); }); const server = app.listen(port); module.exports = { ready: readyPromise, close: () => { server.close(); }, };