Add basic settings dialog shell in Vue

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 app/node_modules
-app/build/*
+app/dist
 !app/build/.gitkeep
 app/env/google-application-credentials.json
 app/npm-debug.log

app/build/setup-dev-server.js

@@ -0,0 +1,85 @@
+const fs = require('fs')
+const path = require('path')
+const MFS = require('memory-fs')
+const webpack = require('webpack')
+const chokidar = require('chokidar')
+const clientConfig = require('./webpack.client.config')
+const serverConfig = require('./webpack.server.config')
+
+const readFile = (fs, file) => {
+  try {
+    return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
+  } catch (e) {}
+}
+
+module.exports = function setupDevServer (app, templatePath, cb) {
+  let bundle
+  let template
+  let clientManifest
+
+  let ready
+  const readyPromise = new Promise(r => { ready = r })
+  const update = () => {
+    if (bundle && clientManifest) {
+      ready()
+      cb(bundle, {
+        template,
+        clientManifest
+      })
+    }
+  }
+
+  // read template from disk and watch
+  template = fs.readFileSync(templatePath, 'utf-8')
+  chokidar.watch(templatePath).on('change', () => {
+    template = fs.readFileSync(templatePath, 'utf-8')
+    console.log('index.html template updated.')
+    update()
+  })
+
+  // modify client config to work with hot middleware
+  clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
+  clientConfig.output.filename = '[name].js'
+  clientConfig.plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  )
+
+  // dev middleware
+  const clientCompiler = webpack(clientConfig)
+  const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
+    publicPath: clientConfig.output.publicPath,
+    noInfo: true
+  })
+  app.use(devMiddleware)
+  clientCompiler.plugin('done', stats => {
+    stats = stats.toJson()
+    stats.errors.forEach(err => console.error(err))
+    stats.warnings.forEach(err => console.warn(err))
+    if (stats.errors.length) return
+    clientManifest = JSON.parse(readFile(
+      devMiddleware.fileSystem,
+      'vue-ssr-client-manifest.json'
+    ))
+    update()
+  })
+
+  // hot middleware
+  app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
+
+  // watch and update server renderer
+  const serverCompiler = webpack(serverConfig)
+  const mfs = new MFS()
+  serverCompiler.outputFileSystem = mfs
+  serverCompiler.watch({}, (err, stats) => {
+    if (err) throw err
+    stats = stats.toJson()
+    if (stats.errors.length) return
+
+    // read bundle generated by vue-ssr-webpack-plugin
+    bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
+    update()
+  })
+
+  return readyPromise
+}

app/build/vue-loader.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extractCSS: process.env.NODE_ENV === 'production',
+  preserveWhitespace: false,
+  postcss: [
+    require('autoprefixer')({
+      browsers: ['last 3 versions']
+    })
+  ]
+}

app/build/webpack.base.config.js

@@ -0,0 +1,76 @@
+const path = require('path')
+const webpack = require('webpack')
+const vueConfig = require('./vue-loader.config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+const isProd = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  devtool: isProd
+    ? false
+    : '#cheap-module-source-map',
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: '[name].[chunkhash].js'
+  },
+  resolve: {
+    alias: {
+      'public': path.resolve(__dirname, '../public')
+    }
+  },
+  module: {
+    noParse: /es6-promise\.js$/, // avoid webpack shimming process
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: '[name].[ext]?[hash]'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: isProd
+          ? ExtractTextPlugin.extract({
+              use: 'css-loader?minimize',
+              fallback: 'vue-style-loader'
+            })
+          : ['vue-style-loader', 'css-loader']
+      },
+      {
+        test: /\.scss$/,
+        loader: 'sass-loader'
+      },
+    ]
+  },
+  performance: {
+    maxEntrypointSize: 300000,
+    hints: isProd ? 'warning' : false
+  },
+  plugins: isProd
+    ? [
+        new webpack.optimize.UglifyJsPlugin({
+          compress: { warnings: false }
+        }),
+        new webpack.optimize.ModuleConcatenationPlugin(),
+        new ExtractTextPlugin({
+          filename: 'common.[chunkhash].css'
+        })
+      ]
+    : [
+        new FriendlyErrorsPlugin()
+      ]
+}

app/build/webpack.client.config.js

@@ -0,0 +1,75 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+const SWPrecachePlugin = require('sw-precache-webpack-plugin')
+const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+
+const config = merge(base, {
+  entry: {
+    app: './src/entry-client.js'
+  },
+  resolve: {
+    alias: {
+      'create-api': './create-api-client.js'
+    }
+  },
+  plugins: [
+    // strip dev-only code in Vue source
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.VUE_ENV': '"client"'
+    }),
+    // extract vendor chunks for better caching
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module) {
+        // a module is extracted into the vendor chunk if...
+        return (
+          // it's inside node_modules
+          /node_modules/.test(module.context) &&
+          // and not a CSS file (due to extract-text-webpack-plugin limitation)
+          !/\.css$/.test(module.request)
+        )
+      }
+    }),
+    // extract webpack runtime & manifest to avoid vendor chunk hash changing
+    // on every build.
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest'
+    }),
+    new VueSSRClientPlugin()
+  ]
+})
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(
+    // auto generate service worker
+    new SWPrecachePlugin({
+      cacheId: 'vue-hn',
+      filename: 'service-worker.js',
+      minify: true,
+      dontCacheBustUrlsMatching: /./,
+      staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
+      runtimeCaching: [
+        {
+          urlPattern: '/',
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: /\/(top|new|show|ask|jobs)/,
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/item/:id',
+          handler: 'networkFirst'
+        },
+        {
+          urlPattern: '/user/:id',
+          handler: 'networkFirst'
+        }
+      ]
+    })
+  )
+}
+
+module.exports = config

app/build/webpack.server.config.js

@@ -0,0 +1,33 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+const nodeExternals = require('webpack-node-externals')
+const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
+
+module.exports = merge(base, {
+  target: 'node',
+  devtool: '#source-map',
+  entry: './src/entry-server.js',
+  output: {
+    filename: 'server-bundle.js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    alias: {
+      'create-api': './create-api-server.js'
+    }
+  },
+  // https://webpack.js.org/configuration/externals/#externals
+  // https://github.com/liady/webpack-node-externals
+  externals: nodeExternals({
+    // do not externalize CSS files in case we need to import it from a dep
+    whitelist: /\.css$/
+  }),
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.VUE_ENV': '"server"'
+    }),
+    new VueSSRServerPlugin()
+  ]
+})