dev-server.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. 'use strict'
  2. require('./check-versions')()
  3. const config = require('../config')
  4. if (!process.env.NODE_ENV) {
  5. process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  6. }
  7. const opn = require('opn')
  8. const path = require('path')
  9. const express = require('express')
  10. const webpack = require('webpack')
  11. const proxyMiddleware = require('http-proxy-middleware')
  12. const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
  13. ? require('./webpack.prod.conf')
  14. : require('./webpack.dev.conf')
  15. // default port where dev server listens for incoming traffic
  16. const port = process.env.PORT || config.dev.port
  17. // automatically open browser, if not set will be false
  18. const autoOpenBrowser = !!config.dev.autoOpenBrowser
  19. // Define HTTP proxies to your custom API backend
  20. // https://github.com/chimurai/http-proxy-middleware
  21. const proxyTable = config.dev.proxyTable
  22. const app = express()
  23. const compiler = webpack(webpackConfig)
  24. const devMiddleware = require('webpack-dev-middleware')(compiler, {
  25. publicPath: webpackConfig.output.publicPath,
  26. quiet: true
  27. })
  28. const hotMiddleware = require('webpack-hot-middleware')(compiler, {
  29. log: false,
  30. heartbeat: 2000
  31. })
  32. // force page reload when html-webpack-plugin template changes
  33. // currently disabled until this is resolved:
  34. // https://github.com/jantimon/html-webpack-plugin/issues/680
  35. // compiler.plugin('compilation', function (compilation) {
  36. // compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
  37. // hotMiddleware.publish({ action: 'reload' })
  38. // cb()
  39. // })
  40. // })
  41. // enable hot-reload and state-preserving
  42. // compilation error display
  43. app.use(hotMiddleware)
  44. // proxy api requests
  45. Object.keys(proxyTable).forEach(function (context) {
  46. let options = proxyTable[context]
  47. if (typeof options === 'string') {
  48. options = { target: options }
  49. }
  50. app.use(proxyMiddleware(options.filter || context, options))
  51. })
  52. // handle fallback for HTML5 history API
  53. app.use(require('connect-history-api-fallback')())
  54. // serve webpack bundle output
  55. app.use(devMiddleware)
  56. // serve pure static assets
  57. const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
  58. app.use(staticPath, express.static('./static'))
  59. const uri = 'http://localhost:' + port
  60. var _resolve
  61. var _reject
  62. var readyPromise = new Promise((resolve, reject) => {
  63. _resolve = resolve
  64. _reject = reject
  65. })
  66. var server
  67. var portfinder = require('portfinder')
  68. portfinder.basePort = port
  69. console.log('> Starting dev server...')
  70. devMiddleware.waitUntilValid(() => {
  71. portfinder.getPort((err, port) => {
  72. if (err) {
  73. _reject(err)
  74. }
  75. process.env.PORT = port
  76. var uri = 'http://localhost:' + port
  77. console.log('> Listening at ' + uri + '\n')
  78. // when env is testing, don't need open it
  79. if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
  80. opn(uri)
  81. }
  82. server = app.listen(port)
  83. _resolve()
  84. })
  85. })
  86. module.exports = {
  87. ready: readyPromise,
  88. close: () => {
  89. server.close()
  90. }
  91. }