Upgrade webpack, remove service worker, other small optimizations

2026-01-13 07:00:39 +00:00 · 2018-04-27 19:55:15 +02:00
parent 01970b4a2b
commit 9f0ae90dd6
53 changed files with 6174 additions and 6070 deletions
--- a/WebConfigGenerator/.babelrc
+++ b/WebConfigGenerator/.babelrc
@@ -1,18 +0,0 @@
-{
-  "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"]
-    }
-  }
-}
--- a/WebConfigGenerator/.postcssrc.js
+++ b/WebConfigGenerator/.postcssrc.js
@@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserlist" field in package.json
-    "autoprefixer": {}
-  }
-}
--- a/WebConfigGenerator/build.js
+++ b/WebConfigGenerator/build.js
@@ -0,0 +1,83 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+
+const config = {
+  mode: 'production',
+  entry: {
+    app: './src/app.js'
+  },
+  output: {
+    filename: 'js/[name].js',
+    chunkFilename: 'js/[id].chunk.js',
+    path: path.resolve(__dirname, '../docs')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-syntax-dynamic-import']
+          }
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.sass/,
+        use: ['vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { indentedSyntax: true } }]
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 8192,
+            name: 'media/[name].[ext]'
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+    }
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../docs/index.html'), template: 'index.html', inject: true, hash: false }),
+    new UglifyJSPlugin(),
+    new VueLoaderPlugin()
+  ]
+};
+
+const compiler = webpack(config);
+
+compiler.run((err, stats) => {
+  if (err) {
+    console.error(err.stack || err);
+    if (err.details) console.error(err.details);
+    return;
+  }
+
+  console.log(stats.toString({
+    assets: true,
+    cached: false,
+    children: false,
+    colors: true,
+    modules: false,
+    chunks: false
+  }));
+});
--- a/WebConfigGenerator/build/build.js
+++ b/WebConfigGenerator/build/build.js
@@ -1,35 +0,0 @@
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
-
-var 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')
-
-    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'
-    ))
-  })
-})
--- a/WebConfigGenerator/build/check-versions.js
+++ b/WebConfigGenerator/build/check-versions.js
@@ -1,48 +0,0 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-var 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 () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var 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 (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
-    }
-    console.log()
-    process.exit(1)
-  }
-}
--- a/WebConfigGenerator/build/dev-client.js
+++ b/WebConfigGenerator/build/dev-client.js
@@ -1,9 +0,0 @@
-/* eslint-disable */
-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()
-  }
-})
--- a/WebConfigGenerator/build/dev-server.js
+++ b/WebConfigGenerator/build/dev-server.js
@@ -1,89 +0,0 @@
-require('./check-versions')()
-
-var config = require('../config')
-if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: () => {}
-})
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var 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)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-var uri = 'http://localhost:' + port
-
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-var server = app.listen(port)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}
--- a/WebConfigGenerator/build/utils.js
+++ b/WebConfigGenerator/build/utils.js
@@ -1,71 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  var 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) {
-    var 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) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-  return output
-}
--- a/WebConfigGenerator/build/vue-loader.conf.js
+++ b/WebConfigGenerator/build/vue-loader.conf.js
@@ -1,12 +0,0 @@
-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: isProduction
-      ? config.build.productionSourceMap
-      : config.dev.cssSourceMap,
-    extract: isProduction
-  })
-}
--- a/WebConfigGenerator/build/webpack.base.conf.js
+++ b/WebConfigGenerator/build/webpack.base.conf.js
@@ -1,58 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var 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: /\.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: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  }
-}
--- a/WebConfigGenerator/build/webpack.dev.conf.js
+++ b/WebConfigGenerator/build/webpack.dev.conf.js
@@ -1,35 +0,0 @@
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var 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()
-  ]
-})
--- a/WebConfigGenerator/build/webpack.prod.conf.js
+++ b/WebConfigGenerator/build/webpack.prod.conf.js
@@ -1,129 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
-
-var env = config.build.env
-
-var 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
-    }),
-    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: 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'
-    }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // 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: ['.*']
-      }
-    ]),
-    // service worker caching
-    new SWPrecacheWebpackPlugin({
-        cacheId: 'asf-config-generator',
-        filename: 'service-worker.js',
-        staticFileGlobs: ['dist/**/*.{js,html,css,png}'],
-        minify: true,
-        stripPrefix: 'dist/'
-    })
-  ]
-})
-
-if (config.build.productionGzip) {
-  var 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) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig
--- a/WebConfigGenerator/index.html
+++ b/WebConfigGenerator/index.html
@@ -4,7 +4,6 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#12100E">
-    <link rel="manifest" href="static/manifest.json">
    <title>ASF web config</title>
  </head>
  <body>
--- a/WebConfigGenerator/package-lock.json
+++ b/WebConfigGenerator/package-lock.json
--- a/WebConfigGenerator/package.json
+++ b/WebConfigGenerator/package.json
@@ -5,61 +5,34 @@
  "author": "Arkadiusz 'Mole' Sygulski <arkadiusz@sygulski.pl>",
  "private": true,
  "scripts": {
-    "dev": "node build/dev-server.js",
-    "start": "node build/dev-server.js",
-    "build": "node build/build.js"
+    "build": "node build.js"
  },
  "dependencies": {
-    "vue": "^2.3.3",
-    "vue-i18n": "^7.3.1",
-    "vue-router": "^2.3.1"
+    "lodash": "^4.17.10",
+    "vue": "^2.5.16",
+    "vue-i18n": "^7.6.0",
+    "vue-router": "^2.8.1"
  },
  "devDependencies": {
-    "autoprefixer": "^6.7.2",
-    "babel-core": "^6.22.1",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.22.0",
-    "chalk": "^1.1.3",
-    "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.11.1",
-    "friendly-errors-webpack-plugin": "^1.1.3",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.3",
-    "lodash": "^4.17.4",
-    "node-sass": "^4.5.3",
-    "opn": "^4.0.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "ora": "^1.2.0",
-    "rimraf": "^2.6.0",
-    "sass-loader": "^6.0.6",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "sw-precache-webpack-plugin": "^0.11.4",
-    "url-loader": "^0.5.8",
-    "vue-loader": "^12.1.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.3.3",
-    "webpack": "^2.6.1",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.18.0",
-    "webpack-merge": "^4.1.0"
+    "@babel/core": "^7.0.0-beta.46",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.46",
+    "@babel/preset-env": "^7.0.0-beta.46",
+    "babel-loader": "^8.0.0-beta.2",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "url-loader": "^1.0.1",
+    "vue-loader": "^15.0.3",
+    "vue-style-loader": "^4.1.0",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.6.0"
  },
  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "node": ">= 8.0.0",
+    "npm": ">= 5.0.0"
+  }
 }
--- a/WebConfigGenerator/src/App.vue
+++ b/WebConfigGenerator/src/App.vue
@@ -2,15 +2,15 @@
    <div id="app">
        <div class="head">
            <a href="#" class="logo">
-                <img src="static/logo.png" alt="asf logo">
+                <img src="./assets/logo.png" alt="asf logo">
            </a>
            <h1 class="text-center" v-html="$t('app.name')"></h1>
        </div>
        <div class="menu">
            <ul>
-                <li><a href="#" :class="{ active: $route.path === '/' }" v-html="$t('link.home')"></a></li>
-                <li><a href="#asf" :class="{ active: $route.path === '/asf' }" v-html="$t('link.asf')"></a></li>
-                <li><a href="#bot" :class="{ active: $route.path === '/bot' }" v-html="$t('link.bot')"></a></li>
+                <li><router-link :to="{ name: 'home' }" active-class="active" v-html="$t('link.home')" exact></router-link></li>
+                <li><router-link :to="{ name: 'asf-config' }" active-class="active" v-html="$t('link.asf')"></router-link></li>
+                <li><router-link :to="{ name: 'bot-config' }" active-class="active" v-html="$t('link.bot')"></router-link></li>
            </ul>
        </div>

--- a/WebConfigGenerator/src/app.js
+++ b/WebConfigGenerator/src/app.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+import App from './App.vue';
+import i18nSettings from './i18n.js';
+import router from './router.js';
+
+Vue.use(VueI18n);
+const i18n = new VueI18n(i18nSettings);
+
+new Vue({
+    el: '#app',
+    router,
+    i18n,
+    template: '<App/>',
+    components: { App }
+});
--- a/WebConfigGenerator/src/assets/logo-192.png
+++ b/WebConfigGenerator/src/assets/logo-192.png
--- a/WebConfigGenerator/src/assets/logo-512.png
+++ b/WebConfigGenerator/src/assets/logo-512.png
--- a/WebConfigGenerator/src/assets/logo.png
+++ b/WebConfigGenerator/src/assets/logo.png
--- a/WebConfigGenerator/src/components/ASFConfig.vue
+++ b/WebConfigGenerator/src/components/ASFConfig.vue
@@ -24,25 +24,25 @@
 </template>

 <script>
-    import { each } from 'lodash';
-    import Config from './mixin/Config.vue';
+  import { each } from 'lodash';
+  import Config from './mixin/Config.vue';

-    export default {
-        name: 'ASFConfig',
-        mixins: [Config],
-        data() { return { type: 'asf', filename: 'ASF.json' }; },
-        methods: {
-            processModelToJSON(model) {
-                if (model.Blacklist && model.Blacklist.length) {
-                    model.Blacklist = model.Blacklist.map(item => parseInt(item, 10)).filter(item => !isNaN(item) && item > 0);
-                }
-
-                each(model, (value, key) => {
-                    if (typeof value === 'string' && value === '') delete model[key];
-                });
-
-                return model;
-            }
+  export default {
+    name: 'ASFConfig',
+    mixins: [Config],
+    data() { return { type: 'asf', filename: 'ASF.json' }; },
+    methods: {
+      processModelToJSON(model) {
+        if (model.Blacklist && model.Blacklist.length) {
+          model.Blacklist = model.Blacklist.map(item => parseInt(item, 10)).filter(item => !isNaN(item) && item > 0);
        }
-    };
+
+        each(model, (value, key) => {
+          if (typeof value === 'string' && value === '') delete model[key];
+        });
+
+        return model;
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/components/BotConfig.vue
+++ b/WebConfigGenerator/src/components/BotConfig.vue
@@ -24,30 +24,30 @@
 </template>

 <script>
-    import { each } from 'lodash';
-    import Config from './mixin/Config.vue';
+  import { each } from 'lodash';
+  import Config from './mixin/Config.vue';

-    export default {
-        name: 'BotConfig',
-        mixins: [Config],
-        data() { return { type: 'bot' }; },
-        computed: { filename() { return `${this.model.name}.json`; } },
-        methods: {
-            processModelToJSON(originalModel) {
-                const model = { ...originalModel }; // Need to clone that so we don't destroy `model.name`
+  export default {
+    name: 'BotConfig',
+    mixins: [Config],
+    data() { return { type: 'bot' }; },
+    computed: { filename() { return `${this.model.name}.json`; } },
+    methods: {
+      processModelToJSON(originalModel) {
+        const model = { ...originalModel }; // Need to clone that so we don't destroy `model.name`

-                if (model.GamesPlayedWhileIdle && model.GamesPlayedWhileIdle.length) {
-                    model.GamesPlayedWhileIdle = model.GamesPlayedWhileIdle.map(value => parseInt(value, 10)).filter(value => !isNaN(value) && value > 0);
-                }
-
-                each(model, (value, key) => {
-                    if (typeof value === 'string' && value === '') delete model[key];
-                });
-
-                if (model.name) delete model.name;
-
-                return model;
-            }
+        if (model.GamesPlayedWhileIdle && model.GamesPlayedWhileIdle.length) {
+          model.GamesPlayedWhileIdle = model.GamesPlayedWhileIdle.map(value => parseInt(value, 10)).filter(value => !isNaN(value) && value > 0);
        }
-    };
+
+        each(model, (value, key) => {
+          if (typeof value === 'string' && value === '') delete model[key];
+        });
+
+        if (model.name) delete model.name;
+
+        return model;
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/components/Home.vue
+++ b/WebConfigGenerator/src/components/Home.vue
@@ -5,10 +5,10 @@
 </template>

 <script>
-    export default {};
+  export default {};
 </script>

-<style>
+<style lang="scss">
    .text-justify {
        text-align: justify;
    }
--- a/WebConfigGenerator/src/components/fields/CheckboxGroup.vue
+++ b/WebConfigGenerator/src/components/fields/CheckboxGroup.vue
@@ -9,10 +9,10 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'CheckboxGroup'
-    };
+  export default {
+    mixins: [Input],
+    name: 'CheckboxGroup'
+  };
 </script>
--- a/WebConfigGenerator/src/components/fields/InputCheckbox.vue
+++ b/WebConfigGenerator/src/components/fields/InputCheckbox.vue
@@ -10,12 +10,12 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputCheckbox'
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputCheckbox'
+  };
 </script>

 <style lang="scss">
--- a/WebConfigGenerator/src/components/fields/InputFlag.vue
+++ b/WebConfigGenerator/src/components/fields/InputFlag.vue
@@ -16,7 +16,7 @@
            </div>
            <div class="col col-2">
                <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                </div>
            </div>
        </div>
@@ -28,39 +28,39 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputFlag',
-        data() {
-            return {
-                items: [], // Vue doesn't work well with Sets...
-                flagValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.flagValue && this.flagValue !== 0) return;
-                if (!this.items.includes(this.flagValue)) this.items.push(this.flagValue);
-                this.flagValue = this.schema.defaultValue;
-                this.value = this.items.reduce((el, sum) => { return el + sum; });
-            },
-            removeElement(index) {
-                this.items.splice(index, 1);
-                this.value = this.items.reduce((el, sum) => { return el + sum; });
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+  export default {
+    mixins: [Input],
+    name: 'InputFlag',
+    data() {
+      return {
+        items: [], // Vue doesn't work well with Sets...
+        flagValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.flagValue && this.flagValue !== 0) return;
+        if (!this.items.includes(this.flagValue)) this.items.push(this.flagValue);
+        this.flagValue = this.schema.defaultValue;
+        this.value = this.items.reduce((el, sum) => { return el + sum; });
+      },
+      removeElement(index) {
+        this.items.splice(index, 1);
+        this.value = this.items.reduce((el, sum) => { return el + sum; });
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;

-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });

-                return toResolve;
-            }
-        }
-    };
+        return toResolve;
+      }
+    }
+  };
 </script>

 <style lang="scss">
--- a/WebConfigGenerator/src/components/fields/InputMap.vue
+++ b/WebConfigGenerator/src/components/fields/InputMap.vue
@@ -27,7 +27,7 @@
            </div>
            <div class="col col-2">
                <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                </div>
            </div>
        </div>
@@ -40,75 +40,75 @@
 </template>

 <script>
-    import { each } from 'lodash';
-    import Input from '../mixin/Input.vue';
+  import { each } from 'lodash';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputMap',
-        computed: {
-            keyErrors() {
-                if (!this.schema.keyValidator) return [];
-                return this.validate(this.mapKey, this.schema.keyValidator);
-            },
-            keyInvalid() {
-                return this.keyErrors.length !== 0;
-            },
-            valueErrors() {
-                if (!this.schema.valueValidator) return [];
-                return this.validate(this.mapValue, this.schema.valueValidator);
-            },
-            valueInvalid() {
-                return this.valueErrors.length !== 0;
-            }
-        },
-        data() {
-            return {
-                items: {}, // Vue doesn't work well with Maps...
-                mapKey: this.schema.defaultKey,
-                mapValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.mapValue && this.mapValue !== 0 || !this.mapKey && this.mapKey !== 0) return;
+  export default {
+    mixins: [Input],
+    name: 'InputMap',
+    computed: {
+      keyErrors() {
+        if (!this.schema.keyValidator) return [];
+        return this.validate(this.mapKey, this.schema.keyValidator);
+      },
+      keyInvalid() {
+        return this.keyErrors.length !== 0;
+      },
+      valueErrors() {
+        if (!this.schema.valueValidator) return [];
+        return this.validate(this.mapValue, this.schema.valueValidator);
+      },
+      valueInvalid() {
+        return this.valueErrors.length !== 0;
+      }
+    },
+    data() {
+      return {
+        items: {}, // Vue doesn't work well with Maps...
+        mapKey: this.schema.defaultKey,
+        mapValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.mapValue && this.mapValue !== 0 || !this.mapKey && this.mapKey !== 0) return;

-                if (this.hasErrors()) return;
+        if (this.hasErrors()) return;

-                this.items[this.mapKey] = this.mapValue;
-                this.mapValue = this.schema.defaultValue;
-                this.mapKey = this.schema.defaultKey;
-                this.$emit('update', this.items, this.schema.field);
-            },
-            removeElement(key) {
-                this.$delete(this.items, key);
-                this.$emit('update', this.items, this.schema.field);
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+        this.items[this.mapKey] = this.mapValue;
+        this.mapValue = this.schema.defaultValue;
+        this.mapKey = this.schema.defaultKey;
+        this.$emit('update', this.items, this.schema.field);
+      },
+      removeElement(key) {
+        this.$delete(this.items, key);
+        this.$emit('update', this.items, this.schema.field);
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;

-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });

-                return toResolve;
-            },
-            hasErrors() {
-                const invalid = this.keyInvalid || this.valueInvalid;
-                if (!invalid) return false;
+        return toResolve;
+      },
+      hasErrors() {
+        const invalid = this.keyInvalid || this.valueInvalid;
+        if (!invalid) return false;

-                const fields = [];
-                if (this.keyInvalid) each(this.$el.getElementsByClassName('map-key'), field => fields.push(field));
-                if (this.valueInvalid) each(this.$el.getElementsByClassName('map-value'), field => fields.push(field));
+        const fields = [];
+        if (this.keyInvalid) each(this.$el.getElementsByClassName('map-key'), field => fields.push(field));
+        if (this.valueInvalid) each(this.$el.getElementsByClassName('map-value'), field => fields.push(field));

-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);

-                return true;
-            }
-        }
-    };
+        return true;
+      }
+    }
+  };
 </script>

 <style lang="scss">
--- a/WebConfigGenerator/src/components/fields/InputNumber.vue
+++ b/WebConfigGenerator/src/components/fields/InputNumber.vue
@@ -12,21 +12,21 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputNumber',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputNumber',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/components/fields/InputPassword.vue
+++ b/WebConfigGenerator/src/components/fields/InputPassword.vue
@@ -11,21 +11,21 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputPassword',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputPassword',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/components/fields/InputSelect.vue
+++ b/WebConfigGenerator/src/components/fields/InputSelect.vue
@@ -12,10 +12,10 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputSelect'
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputSelect'
+  };
 </script>
--- a/WebConfigGenerator/src/components/fields/InputSet.vue
+++ b/WebConfigGenerator/src/components/fields/InputSet.vue
@@ -19,7 +19,7 @@
            </div>
            <div class="col col-2">
                <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                </div>
            </div>
        </div>
@@ -31,61 +31,61 @@
 </template>

 <script>
-    import { each } from 'lodash';
-    import Input from '../mixin/Input.vue';
+  import { each } from 'lodash';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputSet',
-        computed: {
-            errors() {
-                return this.schema.values ? [] : this.validate(this.setValue);
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        },
-        data() {
-            return {
-                items: [], // Vue doesn't work well with Sets...
-                setValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.setValue && this.setValue !== 0) return;
-                if (this.hasErrors()) return;
-                if (!this.items.includes(this.setValue)) this.items.push(this.setValue);
-                this.setValue = this.schema.defaultValue;
-                this.$emit('update', this.items, this.schema.field);
-            },
-            removeElement(index) {
-                this.items.splice(index, 1);
-                this.$emit('update', this.items, this.schema.field);
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+  export default {
+    mixins: [Input],
+    name: 'InputSet',
+    computed: {
+      errors() {
+        return this.schema.values ? [] : this.validate(this.setValue);
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    },
+    data() {
+      return {
+        items: [], // Vue doesn't work well with Sets...
+        setValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.setValue && this.setValue !== 0) return;
+        if (this.hasErrors()) return;
+        if (!this.items.includes(this.setValue)) this.items.push(this.setValue);
+        this.setValue = this.schema.defaultValue;
+        this.$emit('update', this.items, this.schema.field);
+      },
+      removeElement(index) {
+        this.items.splice(index, 1);
+        this.$emit('update', this.items, this.schema.field);
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;

-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });

-                return toResolve;
-            },
-            hasErrors() {
-                if (!this.invalid) return false;
+        return toResolve;
+      },
+      hasErrors() {
+        if (!this.invalid) return false;

-                const fields = [];
-                each(this.$el.getElementsByClassName('set-value'), field => fields.push(field));
+        const fields = [];
+        each(this.$el.getElementsByClassName('set-value'), field => fields.push(field));

-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);

-                return true;
-            }
-        }
-    };
+        return true;
+      }
+    }
+  };
 </script>

 <style lang="scss">
--- a/WebConfigGenerator/src/components/fields/InputText.vue
+++ b/WebConfigGenerator/src/components/fields/InputText.vue
@@ -11,21 +11,21 @@
 </template>

 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';

-    export default {
-        mixins: [Input],
-        name: 'InputText',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputText',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/components/mixin/Config.vue
+++ b/WebConfigGenerator/src/components/mixin/Config.vue
@@ -1,85 +1,85 @@
 <script>
-    import { each } from 'lodash';
+  import { each } from 'lodash';

-    import schema from '../../schema';
+  import schema from '../../schema';

-    const fieldComponents = {};
-    const fields = require.context('../fields', false, /^\.\/([\w-_]+)\.vue$/);
+  const fieldComponents = {};
+  const fields = require.context('../fields', false, /^\.\/([\w-_]+)\.vue$/);

-    each(fields.keys(), key => {
-        const name = key.replace(/^\.\//, '').replace(/\.vue/, '');
-        fieldComponents[name] = fields(key);
-    });
+  each(fields.keys(), key => {
+    const name = key.replace(/^\.\//, '').replace(/\.vue/, '');
+    fieldComponents[name] = fields(key).default;
+  });

-    export default {
-        data() {
-            const versions = [];
-            for (const version in schema) versions.push(version);
+  export default {
+    data() {
+      const versions = [];
+      for (const version in schema) versions.push(version);

-            const selectedVersion = sessionStorage.getItem('selectedVersion') || versions[0];
+      const selectedVersion = sessionStorage.getItem('selectedVersion') || versions[0];

-            return {
-                model: {},
-                displayAdvanced: false,
-                selectedVersion,
-                versions,
-                type: ''
-            };
-        },
-        computed: {
-            schema() {
-                return schema[this.selectedVersion][this.type] || {};
-            }
-        },
-        methods: {
-            updateModel(value, field) {
-                this.model[field] = value;
-            },
-            downloadJSON() {
-                if (!this.validateForm()) return;
+      return {
+        model: {},
+        displayAdvanced: false,
+        selectedVersion,
+        versions,
+        type: ''
+      };
+    },
+    computed: {
+      schema() {
+        return schema[this.selectedVersion][this.type] || {};
+      }
+    },
+    methods: {
+      updateModel(value, field) {
+        this.model[field] = value;
+      },
+      downloadJSON() {
+        if (!this.validateForm()) return;

-                const json = this.processModelToJSON(this.model);
-                const text = JSON.stringify(json, null, 2);
+        const json = this.processModelToJSON(this.model);
+        const text = JSON.stringify(json, null, 2);

-                this.downloadText(text, this.filename);
-            },
-            downloadText(text, filename) {
-                const element = document.createElement('a');
-                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-                element.setAttribute('download', filename);
+        this.downloadText(text, this.filename);
+      },
+      downloadText(text, filename) {
+        const element = document.createElement('a');
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', filename);

-                element.style.display = 'none';
-                document.body.appendChild(element);
+        element.style.display = 'none';
+        document.body.appendChild(element);

-                element.click();
+        element.click();

-                document.body.removeChild(element);
-            },
-            toggleAdvanced() {
-                this.displayAdvanced = !this.displayAdvanced;
-            },
-            validateForm() {
-                const form = document.getElementsByTagName('form')[0];
+        document.body.removeChild(element);
+      },
+      toggleAdvanced() {
+        this.displayAdvanced = !this.displayAdvanced;
+      },
+      validateForm() {
+        const form = document.getElementsByTagName('form')[0];

-                const fields = document.getElementsByClassName('error');
-                if (!fields.length) return form.checkValidity();
+        const fields = document.getElementsByClassName('error');
+        if (!fields.length) return form.checkValidity();

-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
-                return false;
-            },
-            processModelToJSON(model) {
-                return model;
-            }
-        },
-        watch: {
-            selectedVersion(version) {
-                sessionStorage.setItem('selectedVersion', version);
-            }
-        },
-        components: fieldComponents
-    };
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        return false;
+      },
+      processModelToJSON(model) {
+        return model;
+      }
+    },
+    watch: {
+      selectedVersion(version) {
+        sessionStorage.setItem('selectedVersion', version);
+      }
+    },
+    components: fieldComponents
+  };
 </script>

 <style lang="scss">
--- a/WebConfigGenerator/src/components/mixin/Input.vue
+++ b/WebConfigGenerator/src/components/mixin/Input.vue
@@ -1,26 +1,26 @@
 <script>
-    import Validators from '../../validators';
+  import Validators from '../../validators';

-    export default {
-        props: ['schema'],
-        watch: {
-            value() {
-                this.$emit('update', this.value, this.schema.field);
-            }
-        },
-        data() {
-            return { value: this.schema.defaultValue };
-        },
-        methods: {
-            validate(value, validator) {
-                if (!validator && !this.schema.validator) {
-                    if (this.schema.required) return Validators.required(value, this.schema);
-                    return [];
-                }
-
-                if (!validator) return this.schema.validator(value, this.schema);
-                return validator(value, this.schema);
-            }
+  export default {
+    props: ['schema'],
+    watch: {
+      value() {
+        this.$emit('update', this.value, this.schema.field);
+      }
+    },
+    data() {
+      return { value: this.schema.defaultValue };
+    },
+    methods: {
+      validate(value, validator) {
+        if (!validator && !this.schema.validator) {
+          if (this.schema.required) return Validators.required(value, this.schema);
+          return [];
        }
-    };
+
+        if (!validator) return this.schema.validator(value, this.schema);
+        return validator(value, this.schema);
+      }
+    }
+  };
 </script>
--- a/WebConfigGenerator/src/main.js
+++ b/WebConfigGenerator/src/main.js
@@ -1,29 +0,0 @@
-// 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 VueI18n from 'vue-i18n';
-
-import App from './App.vue';
-import i18nSettings from './i18n.js';
-import router from './router';
-
-Vue.config.productionTip = false;
-
-Vue.use(VueI18n);
-
-console.log(i18nSettings);
-
-const i18n = new VueI18n(i18nSettings);
-
-/* eslint-disable no-new */
-new Vue({
-    el: '#app',
-    router,
-    i18n,
-    template: '<App/>',
-    components: { App }
-});
-
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('service-worker.js');
-}
--- a/WebConfigGenerator/src/router.js
+++ b/WebConfigGenerator/src/router.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: () => import('./components/Home.vue')
+        },
+        {
+            path: '/asf',
+            name: 'asf-config',
+            component: () => import('./components/ASFConfig.vue')
+        },
+        {
+            path: '/bot',
+            name: 'bot-config',
+            component: () => import('./components/BotConfig.vue')
+        }
+    ]
+});
--- a/WebConfigGenerator/src/router/index.js
+++ b/WebConfigGenerator/src/router/index.js
@@ -1,28 +0,0 @@
-import ASFConfig from '@/components/ASFConfig';
-import BotConfig from '@/components/BotConfig';
-import Home from '@/components/Home';
-
-import Vue from 'vue';
-import Router from 'vue-router';
-
-Vue.use(Router);
-
-export default new Router({
-    routes: [
-        {
-            path: '/',
-            name: 'Home',
-            component: Home
-        },
-        {
-            path: '/asf',
-            name: 'ASFConfig',
-            component: ASFConfig
-        },
-        {
-            path: '/bot',
-            name: 'BotConfig',
-            component: BotConfig
-        }
-    ]
-});
--- a/WebConfigGenerator/static/.gitkeep
+++ b/WebConfigGenerator/static/.gitkeep
--- a/WebConfigGenerator/static/manifest.json
+++ b/WebConfigGenerator/static/manifest.json
@@ -1,26 +0,0 @@
-{
-  "name": "ASF config generator",
-  "short_name": "asf-config",
-  "icons": [
-    {
-      "src": "/static/logo.png",
-      "sizes": "184x184",
-      "type": "image/png"
-    },
-    {
-      "src": "/static/logo-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/static/logo-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "/",
-  "display": "fullscreen",
-  "orientation": "portrait",
-  "background_color": "#12100E",
-  "theme_color": "#12100E"
-}