// @noflow
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

const port = process.env.FX_PROFILER_PORT || 4242;
const host = process.env.FX_PROFILER_HOST || 'localhost';

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

app.listen(port, host, function() {
  console.log(
    `> Photon styling is listening at: http://${host}:${port}/photon/\n`
  );
});

@@ -14,159 +14,55 @@
 nst 
-express = require('express');%0Aconst webpack = require('webpack');%0Aconst webpackDevMiddleware = require('webpack-dev-middleware');%0A%0Aconst app = express(
+WebpackDevServer = require('webpack-dev-server'
 );%0Ac
@@ -117,33 +117,35 @@
 nst 
-compiler = webpack(config
+webpack = require('webpack'
 );%0A%0A
@@ -258,251 +258,318 @@
 ';%0A%0A
-// Tell express to use the webpack-dev-middleware and use the webpack.config.js%0A// configuration file as a base.%0Aapp.use(%0A  webpackDevMiddleware(compiler, %7B%0A    publicPath: config.output.publicPath,%0A  %7D)%0A);%0A%0Aapp.listen(port, host, function() %7B
+const serverConfig = %7B%0A  allowedHosts: %5B'localhost', '.gitpod.io'%5D,%0A  contentBase: config.output.path,%0A  publicPath: config.output.publicPath,%0A  stats: %7B%0A    colors: true,%0A  %7D,%0A%7D;%0A%0Anew WebpackDevServer(webpack(config), serverConfig).listen(port, host, function(%0A  err%0A) %7B%0A  if (err) %7B%0A    console.log(err);%0A  %7D
 %0A  c

Use webpack-dev-server for photon components