devServer.js

/* eslint-env node */
/* eslint-disable no-console */

// ----------------------------------------------------------------------------
// Config
// ----------------------------------------------------------------------------

var devPort = 3005
var webpackPort = 8881
var devUrl = process.env.DEV_URL || 'http://0.0.0.0:7777/' // TODO change
var devApi = process.env.DEV_API || 'http://0.0.0.0:7777/api' // TODO change

console.log('Will use this url for site: ' + devUrl)
console.log('Will use this url for API: ' + devApi)

// ----------------------------------------------------------------------------
// Set up main dev server
// (proxies webpack dev server (/build), api (/api), and local server (*))
// ----------------------------------------------------------------------------

var express = require('express')
var proxy = require('http-proxy-middleware')

var app = express()
app.use('/build', proxy('http://localhost:' + webpackPort + '/build'))
app.use('/api', proxy(devApi))
app.use('*', proxy({
  target: devUrl,
  changeOrigin: true
}))

// ----------------------------------------------------------------------------
// Set up webpack dev server
// ----------------------------------------------------------------------------

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config.dev')

var server = new WebpackDevServer(webpack(config), {
  contentBase: __dirname,
  hot: true,
  // noInfo: true,
  historyApiFallback: true,
  publicPath: config.output.publicPath,
  stats: { colors: true }
})

// ----------------------------------------------------------------------------
// start servers
// ----------------------------------------------------------------------------

server.listen(webpackPort, 'localhost', function() {
  console.log('Internal webpack server is up')
  console.log('Building initial...')
})

app.listen(devPort, function() {
  console.log('Listening at http://localhost:' + devPort + '/')
})