diff --git a/frontend/.babelrc b/frontend/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..c06df4d53a2308f7a59b40455f4ed47e91d776f6
--- /dev/null
+++ b/frontend/.babelrc
@@ -0,0 +1,18 @@
+{
+ "presets": [
+ ["env", {
+ "modules": false,
+ "targets": {
+ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+ }
+ }],
+ "stage-2"
+ ],
+ "plugins": ["transform-runtime"],
+ "env": {
+ "test": {
+ "presets": ["env", "stage-2"],
+ "plugins": ["istanbul"]
+ }
+ }
+}
diff --git a/frontend/.editorconfig b/frontend/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..9d08a1a828a3bd2d60de3952744df29f9add27fa
--- /dev/null
+++ b/frontend/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
new file mode 100644
index 0000000000000000000000000000000000000000..34af3774f3127d054d30ac5452f8afc08cdd0291
--- /dev/null
+++ b/frontend/.eslintignore
@@ -0,0 +1,2 @@
+build/*.js
+config/*.js
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0dd62d911761e70c387d89fbc29ecb4b4d8746e
--- /dev/null
+++ b/frontend/.eslintrc.js
@@ -0,0 +1,27 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+ root: true,
+ parser: 'babel-eslint',
+ parserOptions: {
+ sourceType: 'module'
+ },
+ env: {
+ browser: true,
+ },
+ // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+ extends: 'standard',
+ // required to lint *.vue files
+ plugins: [
+ 'html'
+ ],
+ // add your custom rules here
+ 'rules': {
+ // allow paren-less arrow functions
+ 'arrow-parens': 0,
+ // allow async-await
+ 'generator-star-spacing': 0,
+ // allow debugger during development
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+ }
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..c87fa678827a2f5d3efd5057b94ce30c41acbf5a
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/unit/coverage
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/frontend/.postcssrc.js b/frontend/.postcssrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..09948d63e91b03d9880bb5a1cbbf822a3a2f2065
--- /dev/null
+++ b/frontend/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+ "plugins": {
+ // to edit target browsers: use "browserslist" field in package.json
+ "autoprefixer": {}
+ }
+}
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..450a662ef31342b1705aeffdd2e0f591579850df
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,27 @@
+# frontend
+
+> Vue.js frontend for Grady
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/frontend/build/build.js b/frontend/build/build.js
new file mode 100644
index 0000000000000000000000000000000000000000..30f036a1806fed8edf6880a6cdbc0971d8bc0d2e
--- /dev/null
+++ b/frontend/build/build.js
@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+ if (err) throw err
+ webpack(webpackConfig, function (err, stats) {
+ spinner.stop()
+ if (err) throw err
+ process.stdout.write(stats.toString({
+ colors: true,
+ modules: false,
+ children: false,
+ chunks: false,
+ chunkModules: false
+ }) + '\n\n')
+
+ if (stats.hasErrors()) {
+ console.log(chalk.red(' Build failed with errors.\n'))
+ process.exit(1)
+ }
+
+ console.log(chalk.cyan(' Build complete.\n'))
+ console.log(chalk.yellow(
+ ' Tip: built files are meant to be served over an HTTP server.\n' +
+ ' Opening index.html over file:// won\'t work.\n'
+ ))
+ })
+})
diff --git a/frontend/build/check-versions.js b/frontend/build/check-versions.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca407bb16ff339aa36c520e7f0133204cca2b2ab
--- /dev/null
+++ b/frontend/build/check-versions.js
@@ -0,0 +1,49 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+function exec (cmd) {
+ return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+ {
+ name: 'node',
+ currentVersion: semver.clean(process.version),
+ versionRequirement: packageConfig.engines.node
+ }
+]
+
+if (shell.which('npm')) {
+ versionRequirements.push({
+ name: 'npm',
+ currentVersion: exec('npm --version'),
+ versionRequirement: packageConfig.engines.npm
+ })
+}
+
+module.exports = function () {
+ const warnings = []
+ for (let i = 0; i < versionRequirements.length; i++) {
+ const mod = versionRequirements[i]
+ if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+ warnings.push(mod.name + ': ' +
+ chalk.red(mod.currentVersion) + ' should be ' +
+ chalk.green(mod.versionRequirement)
+ )
+ }
+ }
+
+ if (warnings.length) {
+ console.log('')
+ console.log(chalk.yellow('To use this template, you must update following to modules:'))
+ console.log()
+ for (let i = 0; i < warnings.length; i++) {
+ const warning = warnings[i]
+ console.log(' ' + warning)
+ }
+ console.log()
+ process.exit(1)
+ }
+}
diff --git a/frontend/build/dev-client.js b/frontend/build/dev-client.js
new file mode 100644
index 0000000000000000000000000000000000000000..2f75dd531f320c9c08a0bdb61788a2f1a013825b
--- /dev/null
+++ b/frontend/build/dev-client.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+'use strict'
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+ if (event.action === 'reload') {
+ window.location.reload()
+ }
+})
diff --git a/frontend/build/dev-server.js b/frontend/build/dev-server.js
new file mode 100644
index 0000000000000000000000000000000000000000..bcb5c0728d6b5bf448591ac65dec2f76c734ce96
--- /dev/null
+++ b/frontend/build/dev-server.js
@@ -0,0 +1,107 @@
+'use strict'
+require('./check-versions')()
+
+const config = require('../config')
+if (!process.env.NODE_ENV) {
+ process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+const opn = require('opn')
+const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const proxyMiddleware = require('http-proxy-middleware')
+const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
+ ? require('./webpack.prod.conf')
+ : require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+const port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+const autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+const proxyTable = config.dev.proxyTable
+
+const app = express()
+const compiler = webpack(webpackConfig)
+
+const devMiddleware = require('webpack-dev-middleware')(compiler, {
+ publicPath: webpackConfig.output.publicPath,
+ quiet: true
+})
+
+const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+ log: false,
+ heartbeat: 2000
+})
+// force page reload when html-webpack-plugin template changes
+// currently disabled until this is resolved:
+// https://github.com/jantimon/html-webpack-plugin/issues/680
+// compiler.plugin('compilation', function (compilation) {
+// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+// hotMiddleware.publish({ action: 'reload' })
+// cb()
+// })
+// })
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+ let options = proxyTable[context]
+ if (typeof options === 'string') {
+ options = { target: options }
+ }
+ app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// serve pure static assets
+const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+const uri = 'http://localhost:' + port
+
+var _resolve
+var _reject
+var readyPromise = new Promise((resolve, reject) => {
+ _resolve = resolve
+ _reject = reject
+})
+
+var server
+var portfinder = require('portfinder')
+portfinder.basePort = port
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+ portfinder.getPort((err, port) => {
+ if (err) {
+ _reject(err)
+ }
+ process.env.PORT = port
+ var uri = 'http://localhost:' + port
+ console.log('> Listening at ' + uri + '\n')
+ // when env is testing, don't need open it
+ if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+ opn(uri)
+ }
+ server = app.listen(port)
+ _resolve()
+ })
+})
+
+module.exports = {
+ ready: readyPromise,
+ close: () => {
+ server.close()
+ }
+}
diff --git a/frontend/build/utils.js b/frontend/build/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ac71cb2c9b7d3b3edae36de3055e5c279bc40ed
--- /dev/null
+++ b/frontend/build/utils.js
@@ -0,0 +1,72 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+ const assetsSubDirectory = process.env.NODE_ENV === 'production'
+ ? config.build.assetsSubDirectory
+ : config.dev.assetsSubDirectory
+ return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+ options = options || {}
+
+ const cssLoader = {
+ loader: 'css-loader',
+ options: {
+ minimize: process.env.NODE_ENV === 'production',
+ sourceMap: options.sourceMap
+ }
+ }
+
+ // generate loader string to be used with extract text plugin
+ function generateLoaders (loader, loaderOptions) {
+ const loaders = [cssLoader]
+ if (loader) {
+ loaders.push({
+ loader: loader + '-loader',
+ options: Object.assign({}, loaderOptions, {
+ sourceMap: options.sourceMap
+ })
+ })
+ }
+
+ // Extract CSS when that option is specified
+ // (which is the case during production build)
+ if (options.extract) {
+ return ExtractTextPlugin.extract({
+ use: loaders,
+ fallback: 'vue-style-loader'
+ })
+ } else {
+ return ['vue-style-loader'].concat(loaders)
+ }
+ }
+
+ // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+ return {
+ css: generateLoaders(),
+ postcss: generateLoaders(),
+ less: generateLoaders('less'),
+ sass: generateLoaders('sass', { indentedSyntax: true }),
+ scss: generateLoaders('sass'),
+ stylus: generateLoaders('stylus'),
+ styl: generateLoaders('stylus')
+ }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+ const output = []
+ const loaders = exports.cssLoaders(options)
+ for (const extension in loaders) {
+ const loader = loaders[extension]
+ output.push({
+ test: new RegExp('\\.' + extension + '$'),
+ use: loader
+ })
+ }
+ return output
+}
diff --git a/frontend/build/vue-loader.conf.js b/frontend/build/vue-loader.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..eece58fe1b7eb9486746ad9449dbe41f2e85fb42
--- /dev/null
+++ b/frontend/build/vue-loader.conf.js
@@ -0,0 +1,19 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+ loaders: utils.cssLoaders({
+ sourceMap: isProduction
+ ? config.build.productionSourceMap
+ : config.dev.cssSourceMap,
+ extract: isProduction
+ }),
+ transformToRequire: {
+ video: 'src',
+ source: 'src',
+ img: 'src',
+ image: 'xlink:href'
+ }
+}
diff --git a/frontend/build/webpack.base.conf.js b/frontend/build/webpack.base.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..6920efe7e6e85446cd4f00e46f27958cc74d4580
--- /dev/null
+++ b/frontend/build/webpack.base.conf.js
@@ -0,0 +1,76 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+ return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+ entry: {
+ app: './src/main.js'
+ },
+ output: {
+ path: config.build.assetsRoot,
+ filename: '[name].js',
+ publicPath: process.env.NODE_ENV === 'production'
+ ? config.build.assetsPublicPath
+ : config.dev.assetsPublicPath
+ },
+ resolve: {
+ extensions: ['.js', '.vue', '.json'],
+ alias: {
+ 'vue$': 'vue/dist/vue.esm.js',
+ '@': resolve('src'),
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|vue)$/,
+ loader: 'eslint-loader',
+ enforce: 'pre',
+ include: [resolve('src'), resolve('test')],
+ options: {
+ formatter: require('eslint-friendly-formatter')
+ }
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: vueLoaderConfig
+ },
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ include: [resolve('src'), resolve('test')]
+ },
+ {
+ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: utils.assetsPath('img/[name].[hash:7].[ext]')
+ }
+ },
+ {
+ test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: utils.assetsPath('media/[name].[hash:7].[ext]')
+ }
+ },
+ {
+ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+ }
+ }
+ ]
+ }
+}
diff --git a/frontend/build/webpack.dev.conf.js b/frontend/build/webpack.dev.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f25d634588c7f722f71d0f50f11632220a6d5d6
--- /dev/null
+++ b/frontend/build/webpack.dev.conf.js
@@ -0,0 +1,36 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+ baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+ module: {
+ rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+ },
+ // cheap-module-eval-source-map is faster for development
+ devtool: '#cheap-module-eval-source-map',
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': config.dev.env
+ }),
+ // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.NoEmitOnErrorsPlugin(),
+ // https://github.com/ampedandwired/html-webpack-plugin
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'index.html',
+ inject: true
+ }),
+ new FriendlyErrorsPlugin()
+ ]
+})
diff --git a/frontend/build/webpack.prod.conf.js b/frontend/build/webpack.prod.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..9874990e16b70eb6cc91aee5876704d4d2b64b69
--- /dev/null
+++ b/frontend/build/webpack.prod.conf.js
@@ -0,0 +1,128 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
+ ? require('../config/test.env')
+ : config.build.env
+
+const webpackConfig = merge(baseWebpackConfig, {
+ module: {
+ rules: utils.styleLoaders({
+ sourceMap: config.build.productionSourceMap,
+ extract: true
+ })
+ },
+ devtool: config.build.productionSourceMap ? '#source-map' : false,
+ output: {
+ path: config.build.assetsRoot,
+ filename: utils.assetsPath('js/[name].[chunkhash].js'),
+ chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+ },
+ plugins: [
+ // http://vuejs.github.io/vue-loader/en/workflow/production.html
+ new webpack.DefinePlugin({
+ 'process.env': env
+ }),
+ // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false
+ },
+ sourceMap: true
+ }),
+ // extract css into its own file
+ new ExtractTextPlugin({
+ filename: utils.assetsPath('css/[name].[contenthash].css')
+ }),
+ // Compress extracted CSS. We are using this plugin so that possible
+ // duplicated CSS from different components can be deduped.
+ new OptimizeCSSPlugin({
+ cssProcessorOptions: {
+ safe: true
+ }
+ }),
+ // generate dist index.html with correct asset hash for caching.
+ // you can customize output by editing /index.html
+ // see https://github.com/ampedandwired/html-webpack-plugin
+ new HtmlWebpackPlugin({
+ filename: process.env.NODE_ENV === 'testing'
+ ? 'index.html'
+ : config.build.index,
+ template: 'index.html',
+ inject: true,
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeAttributeQuotes: true
+ // more options:
+ // https://github.com/kangax/html-minifier#options-quick-reference
+ },
+ // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+ chunksSortMode: 'dependency'
+ }),
+ // keep module.id stable when vender modules does not change
+ new webpack.HashedModuleIdsPlugin(),
+ // split vendor js into its own file
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ minChunks: function (module) {
+ // any required modules inside node_modules are extracted to vendor
+ return (
+ module.resource &&
+ /\.js$/.test(module.resource) &&
+ module.resource.indexOf(
+ path.join(__dirname, '../node_modules')
+ ) === 0
+ )
+ }
+ }),
+ // extract webpack runtime and module manifest to its own file in order to
+ // prevent vendor hash from being updated whenever app bundle is updated
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'manifest',
+ chunks: ['vendor']
+ }),
+ // copy custom static assets
+ new CopyWebpackPlugin([
+ {
+ from: path.resolve(__dirname, '../static'),
+ to: config.build.assetsSubDirectory,
+ ignore: ['.*']
+ }
+ ])
+ ]
+})
+
+if (config.build.productionGzip) {
+ const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+ webpackConfig.plugins.push(
+ new CompressionWebpackPlugin({
+ asset: '[path].gz[query]',
+ algorithm: 'gzip',
+ test: new RegExp(
+ '\\.(' +
+ config.build.productionGzipExtensions.join('|') +
+ ')$'
+ ),
+ threshold: 10240,
+ minRatio: 0.8
+ })
+ )
+}
+
+if (config.build.bundleAnalyzerReport) {
+ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+ webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
diff --git a/frontend/build/webpack.test.conf.js b/frontend/build/webpack.test.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d658d9ebe5288866a1161bd7202dceccee665f0
--- /dev/null
+++ b/frontend/build/webpack.test.conf.js
@@ -0,0 +1,32 @@
+'use strict'
+// This is the webpack config used for unit tests.
+
+const utils = require('./utils')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+
+const webpackConfig = merge(baseWebpackConfig, {
+ // use inline sourcemap for karma-sourcemap-loader
+ module: {
+ rules: utils.styleLoaders()
+ },
+ devtool: '#inline-source-map',
+ resolveLoader: {
+ alias: {
+ // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
+ // see discussion at https://github.com/vuejs/vue-loader/issues/724
+ 'scss-loader': 'sass-loader'
+ }
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': require('../config/test.env')
+ })
+ ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+module.exports = webpackConfig
diff --git a/frontend/config/dev.env.js b/frontend/config/dev.env.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e22973ae71e949faa15f7a8ab392786918fb22d
--- /dev/null
+++ b/frontend/config/dev.env.js
@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+ NODE_ENV: '"development"'
+})
diff --git a/frontend/config/index.js b/frontend/config/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c458f66802f5f8d206f4f136a0b5d52b59b4c21
--- /dev/null
+++ b/frontend/config/index.js
@@ -0,0 +1,42 @@
+
+'use strict'
+// Template version: 1.1.3
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+ build: {
+ env: require('./prod.env'),
+ index: path.resolve(__dirname, '../dist/index.html'),
+ assetsRoot: path.resolve(__dirname, '../dist'),
+ assetsSubDirectory: 'static',
+ assetsPublicPath: '/',
+ productionSourceMap: true,
+ // Gzip off by default as many popular static hosts such as
+ // Surge or Netlify already gzip all static assets for you.
+ // Before setting to `true`, make sure to:
+ // npm install --save-dev compression-webpack-plugin
+ productionGzip: false,
+ productionGzipExtensions: ['js', 'css'],
+ // Run the build command with an extra argument to
+ // View the bundle analyzer report after build finishes:
+ // `npm run build --report`
+ // Set to `true` or `false` to always turn it on or off
+ bundleAnalyzerReport: process.env.npm_config_report
+ },
+ dev: {
+ env: require('./dev.env'),
+ port: process.env.PORT || 8080,
+ autoOpenBrowser: true,
+ assetsSubDirectory: 'static',
+ assetsPublicPath: '/',
+ proxyTable: {},
+ // CSS Sourcemaps off by default because relative paths are "buggy"
+ // with this option, according to the CSS-Loader README
+ // (https://github.com/webpack/css-loader#sourcemaps)
+ // In our experience, they generally work as expected,
+ // just be aware of this issue when enabling this option.
+ cssSourceMap: false
+ }
+}
diff --git a/frontend/config/prod.env.js b/frontend/config/prod.env.js
new file mode 100644
index 0000000000000000000000000000000000000000..a6f997616eff680e4b2d437e7f31de2cadbfa1de
--- /dev/null
+++ b/frontend/config/prod.env.js
@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+ NODE_ENV: '"production"'
+}
diff --git a/frontend/config/test.env.js b/frontend/config/test.env.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2824a307a33e7243d96e29b12ad518f8cf16aa3
--- /dev/null
+++ b/frontend/config/test.env.js
@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+ NODE_ENV: '"testing"'
+})
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..fb63c5378340aee23aac55a9168ec7067cb63066
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>frontend</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..029fb96ac1f7fe1ab0cfd4f4b508829a46b9fe30
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,23 @@
+<template>
+ <div id="app">
+ <img src="./assets/logo.png">
+ <router-view/>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'app'
+}
+</script>
+
+<style>
+#app {
+ font-family: 'Avenir', Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ margin-top: 60px;
+}
+</style>
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and b/frontend/src/assets/logo.png differ
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c7db115401016b2d3364e0bb9c18096e42d929b
--- /dev/null
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,53 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ <h2>Essential Links</h2>
+ <ul>
+ <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+ <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+ <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
+ <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+ <br>
+ <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+ </ul>
+ <h2>Ecosystem</h2>
+ <ul>
+ <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+ <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+ <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+ <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'HelloWorld',
+ data () {
+ return {
+ msg: 'Welcome to Your Vue.js App'
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+ font-weight: normal;
+}
+
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+li {
+ display: inline-block;
+ margin: 0 10px;
+}
+
+a {
+ color: #42b983;
+}
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec109714369ba35b7771c1a97329187be7b96cf8
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,15 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+ el: '#app',
+ router,
+ template: '<App/>',
+ components: { App }
+})
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7731b77562b403fb67ef1d0794c624d2739fc1f5
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from '@/components/HelloWorld'
+
+Vue.use(Router)
+
+export default new Router({
+ routes: [
+ {
+ path: '/',
+ name: 'Hello',
+ component: HelloWorld
+ }
+ ]
+})
diff --git a/frontend/static/.gitkeep b/frontend/static/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/test/unit/.eslintrc b/frontend/test/unit/.eslintrc
new file mode 100644
index 0000000000000000000000000000000000000000..959a4f4b5764fc6874b1772efd2a3178b5635bca
--- /dev/null
+++ b/frontend/test/unit/.eslintrc
@@ -0,0 +1,9 @@
+{
+ "env": {
+ "mocha": true
+ },
+ "globals": {
+ "expect": true,
+ "sinon": true
+ }
+}
diff --git a/frontend/test/unit/index.js b/frontend/test/unit/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c69f33fd8a0fb2796073222645c42c7c15188a6e
--- /dev/null
+++ b/frontend/test/unit/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
+
+// require all test files (files that ends with .spec.js)
+const testsContext = require.context('./specs', true, /\.spec$/)
+testsContext.keys().forEach(testsContext)
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
+srcContext.keys().forEach(srcContext)
diff --git a/frontend/test/unit/karma.conf.js b/frontend/test/unit/karma.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e4951c9e4ecc597be347be1fd8e163cdbab13e2
--- /dev/null
+++ b/frontend/test/unit/karma.conf.js
@@ -0,0 +1,33 @@
+// This is a karma config file. For more details see
+// http://karma-runner.github.io/0.13/config/configuration-file.html
+// we are also using it with karma-webpack
+// https://github.com/webpack/karma-webpack
+
+var webpackConfig = require('../../build/webpack.test.conf')
+
+module.exports = function (config) {
+ config.set({
+ // to run in additional browsers:
+ // 1. install corresponding karma launcher
+ // http://karma-runner.github.io/0.13/config/browsers.html
+ // 2. add it to the `browsers` array below.
+ browsers: ['PhantomJS'],
+ frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
+ reporters: ['spec', 'coverage'],
+ files: ['./index.js'],
+ preprocessors: {
+ './index.js': ['webpack', 'sourcemap']
+ },
+ webpack: webpackConfig,
+ webpackMiddleware: {
+ noInfo: true
+ },
+ coverageReporter: {
+ dir: './coverage',
+ reporters: [
+ { type: 'lcov', subdir: '.' },
+ { type: 'text-summary' }
+ ]
+ }
+ })
+}
diff --git a/frontend/test/unit/specs/Hello.spec.js b/frontend/test/unit/specs/Hello.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..bfaa225c95f61e61e5e03bab02e25166f063199d
--- /dev/null
+++ b/frontend/test/unit/specs/Hello.spec.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+ it('should render correct contents', () => {
+ const Constructor = Vue.extend(HelloWorld)
+ const vm = new Constructor().$mount()
+ expect(vm.$el.querySelector('.hello h1').textContent)
+ .to.equal('Welcome to Your Vue.js App')
+ })
+})