From 4c643bb8b4e5ae671f772dd093b5b9f6b929b9f4 Mon Sep 17 00:00:00 2001 From: Kotaro Sugawara Date: Tue, 14 May 2019 21:32:46 +0900 Subject: [PATCH] refactor(serve): fixed to allow customization of devserver host and port --- src/webpackServe.ts | 180 +++++++++++++++++++++++--------------------- 1 file changed, 95 insertions(+), 85 deletions(-) diff --git a/src/webpackServe.ts b/src/webpackServe.ts index 46828bfb..43781ddf 100644 --- a/src/webpackServe.ts +++ b/src/webpackServe.ts @@ -21,100 +21,110 @@ module.exports = (ctx: any) => return; } - platforms.forEach(platform => { - glob - .sync( - `${path.join( - ctx.opts.projectRoot, - 'platforms', - platform, - )}/**/*/config.xml`, - ) - .forEach(configXmlPath => { - const configXml = new CordovaConfigParser(configXmlPath); - configXml.setContent( - `http://${platform === 'android' ? '10.0.2.2' : 'localhost'}:8080`, - ); - if (platform === 'ios') - configXml.setElement('allow-navigation', { href: '*' }); - configXml.write(); - }); - }); + try { + const defaultHost = '0.0.0.0'; + const defaultPort = 8080; + + const port = await choosePort(defaultHost, defaultPort); + if (!port) { + resolve(); + return; + } + + platforms.forEach(platform => { + glob + .sync( + `${path.join( + ctx.opts.projectRoot, + 'platforms', + platform, + )}/**/*/config.xml`, + ) + .forEach(configXmlPath => { + const configXml = new CordovaConfigParser(configXmlPath); + configXml.setContent( + `http://${ + platform === 'android' ? '10.0.2.2' : 'localhost' + }:${port}`, + ); + if (platform === 'ios') + configXml.setElement('allow-navigation', { href: '*' }); + configXml.write(); + }); + }); - const webpackConfigPath = path.join( - ctx.opts.projectRoot, - 'webpack.config.js', - ); - // eslint-disable-next-line global-require, import/no-dynamic-require - const customWebpackConfig: webpack.Configuration = require(webpackConfigPath); - const webpackConfig: webpack.Configuration = { - ...customWebpackConfig, - mode: 'development', - plugins: [ - ...(customWebpackConfig.plugins || []), - new WebpackInjectPlugin(() => - fs.readFileSync( - path.resolve(__dirname, '../scripts/www/injectCSP.js'), - 'utf8', + const webpackConfigPath = path.join( + ctx.opts.projectRoot, + 'webpack.config.js', + ); + // eslint-disable-next-line global-require, import/no-dynamic-require + const customWebpackConfig: webpack.Configuration = require(webpackConfigPath); + const webpackConfig: webpack.Configuration = { + ...customWebpackConfig, + mode: 'development', + plugins: [ + ...(customWebpackConfig.plugins || []), + new WebpackInjectPlugin(() => + fs.readFileSync( + path.resolve(__dirname, '../scripts/www/injectCSP.js'), + 'utf8', + ), ), - ), - new WebpackInjectPlugin(() => - fs.readFileSync( - path.resolve(__dirname, '../scripts/www/injectCordovaScript.js'), - 'utf8', + new WebpackInjectPlugin(() => + fs.readFileSync( + path.resolve(__dirname, '../scripts/www/injectCordovaScript.js'), + 'utf8', + ), ), - ), - ], - }; + ], + }; - const platformWwwPaths = { - android: path.join( - ctx.opts.projectRoot, - 'platforms/android/platform_www', - ), - ios: path.join(ctx.opts.projectRoot, 'platforms/ios/platform_www'), - }; + const platformWwwPaths = { + android: path.join( + ctx.opts.projectRoot, + 'platforms/android/platform_www', + ), + ios: path.join(ctx.opts.projectRoot, 'platforms/ios/platform_www'), + }; - const customDevServerConfig: WebpackDevServer.Configuration = - webpackConfig.devServer || {}; - const devServerConfig: WebpackDevServer.Configuration = { - contentBase: path.join(ctx.opts.projectRoot, 'www'), - historyApiFallback: true, - host: '0.0.0.0', - port: 8080, - ...customDevServerConfig, - hot: true, - before: (app, server) => { - if (customDevServerConfig.before) - customDevServerConfig.before(app, server); - (Object.keys(platformWwwPaths) as Array< - keyof typeof platformWwwPaths - >).forEach(platform => { - app.use(`/${platform}`, express.static(platformWwwPaths[platform])); - }); - }, - }; + const customDevServerConfig: WebpackDevServer.Configuration = + webpackConfig.devServer || {}; + const devServerConfig: WebpackDevServer.Configuration = { + contentBase: path.join(ctx.opts.projectRoot, 'www'), + historyApiFallback: true, + host: defaultHost, + port, + ...customDevServerConfig, + hot: true, + before: (app, server) => { + if (customDevServerConfig.before) + customDevServerConfig.before(app, server); + (Object.keys(platformWwwPaths) as Array< + keyof typeof platformWwwPaths + >).forEach(platform => { + app.use(`/${platform}`, express.static(platformWwwPaths[platform])); + }); + }, + }; - // HMR - WebpackDevServer.addDevServerEntrypoints(webpackConfig, devServerConfig); + // HMR + WebpackDevServer.addDevServerEntrypoints(webpackConfig, devServerConfig); - try { - const port = await choosePort('0.0.0.0', 8080); - if (!port) { - resolve(); - return; - } const compiler = webpack(webpackConfig); const server = new WebpackDevServer(compiler, devServerConfig); - server.listen(port, '0.0.0.0', err => { - if (err && err.message) { - console.log(err.message); - reject(); - return; - } - console.log('Starting the development server...\n'); - resolve(); - }); + server.listen( + devServerConfig.port || defaultPort, + devServerConfig.host || defaultHost, + err => { + if (err && err.message) { + console.log(err.message); + reject(); + return; + } + console.log('Starting the development server...\n'); + resolve(); + }, + ); } catch (err) { if (err && err.message) { console.log(err.message);