Initialization of the project

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "git.ignoreLimitWarning": true
+    "git.ignoreLimitWarning": true,
+    "python.pythonPath": "/Library/Frameworks/Python.framework/Versions/3.7/bin/python3"
 }

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017 oleg-agapov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,36 +0,0 @@
-# flask-vue-spa
-Vue.js SPA served over Flask microframework
-
-* Python: 3.6.3
-* Vue.js: 2.5.2
-* vue-router: 3.0.1
-* axios: 0.16.2
-
-Tutorial on how I build this app:
-https://medium.com/@oleg.agapov/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532
-
-## Build Setup
-
-``` bash
-# install front-end
-cd frontend
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production/Flask with minification
-npm run build
-
-
-# install back-end
-cd ../backend
-virtualenv -p python3 venv
-source venv/bin/activate
-pip install -r requirements.txt
-cd ..
-
-# serve back-end at localhost:5000
-FLASK_APP=run.py flask run
-```
-

dist/static/css/app.dfca11727ccf9e74f393b0c223db19ce.css

@@ -0,0 +1 @@
+#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}

dist/static/js/1.5b6be78b138f4f82e219.js

@@ -0,0 +1,2 @@
+webpackJsonp([1],{"+8MP":function(t,e,a){e=t.exports=a("FZ+f")(!0),e.push([t.i,"h1[data-v-35ca387f],h2[data-v-35ca387f]{font-weight:400}ul[data-v-35ca387f]{list-style-type:none;padding:0}li[data-v-35ca387f]{display:inline-block;margin:0 10px}a[data-v-35ca387f]{color:#42b983}","",{version:3,sources:["/Users/oleg/dev/flask/flaskvue/frontend/src/components/HelloWorld.vue"],names:[],mappings:"AACA,wCACE,eAAoB,CACrB,AACD,oBACE,qBAAsB,AACtB,SAAW,CACZ,AACD,oBACE,qBAAsB,AACtB,aAAe,CAChB,AACD,mBACE,aAAe,CAChB",file:"HelloWorld.vue",sourcesContent:["\nh1[data-v-35ca387f], h2[data-v-35ca387f] {\n  font-weight: normal;\n}\nul[data-v-35ca387f] {\n  list-style-type: none;\n  padding: 0;\n}\nli[data-v-35ca387f] {\n  display: inline-block;\n  margin: 0 10px;\n}\na[data-v-35ca387f] {\n  color: #42b983;\n}\n"],sourceRoot:""}])},"07PK":function(t,e,a){"use strict";e.a={name:"HelloWorld",data:function(){return{msg:"Welcome to Your Vue.js App"}}}},LbrM:function(t,e,a){"use strict";var r=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"hello"},[a("h1",[t._v(t._s(t.msg))]),t._v(" "),a("h2",[t._v("Essential Links")]),t._v(" "),t._m(0),t._v(" "),a("h2",[t._v("Ecosystem")]),t._v(" "),t._m(1)])},n=[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"https://vuejs.org",target:"_blank"}},[t._v("Core Docs")])]),t._v(" "),a("li",[a("a",{attrs:{href:"https://forum.vuejs.org",target:"_blank"}},[t._v("Forum")])]),t._v(" "),a("li",[a("a",{attrs:{href:"https://chat.vuejs.org",target:"_blank"}},[t._v("Community Chat")])]),t._v(" "),a("li",[a("a",{attrs:{href:"https://twitter.com/vuejs",target:"_blank"}},[t._v("Twitter")])]),t._v(" "),a("br"),t._v(" "),a("li",[a("a",{attrs:{href:"http://vuejs-templates.github.io/webpack/",target:"_blank"}},[t._v("Docs for This Template")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"http://router.vuejs.org/",target:"_blank"}},[t._v("vue-router")])]),t._v(" "),a("li",[a("a",{attrs:{href:"http://vuex.vuejs.org/",target:"_blank"}},[t._v("vuex")])]),t._v(" "),a("li",[a("a",{attrs:{href:"http://vue-loader.vuejs.org/",target:"_blank"}},[t._v("vue-loader")])]),t._v(" "),a("li",[a("a",{attrs:{href:"https://github.com/vuejs/awesome-vue",target:"_blank"}},[t._v("awesome-vue")])])])}],s={render:r,staticRenderFns:n};e.a=s},gORT:function(t,e,a){"use strict";function r(t){a("hvlX")}Object.defineProperty(e,"__esModule",{value:!0});var n=a("07PK"),s=a("LbrM"),o=a("VU/8"),l=r,v=o(n.a,s.a,!1,l,"data-v-35ca387f",null);e.default=v.exports},hvlX:function(t,e,a){var r=a("+8MP");"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);a("rjj0")("21005778",r,!0)}});
+//# sourceMappingURL=1.5b6be78b138f4f82e219.js.map

dist/static/js/2.f51279a339a43b82ef61.js

@@ -0,0 +1,2 @@
+webpackJsonp([2],{YcJa:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("y6bw"),u=n("VU/8"),l=u(null,r.a,!1,null,null,null);t.default=l.exports},y6bw:function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},u=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("404 - Not Found")])])}],l={render:r,staticRenderFns:u};t.a=l}});
+//# sourceMappingURL=2.f51279a339a43b82ef61.js.map

dist/static/js/3.b0ba1fd256aee2a5d235.js

@@ -0,0 +1,2 @@
+webpackJsonp([3],{U24r:function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},u=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("About")])])}],l={render:r,staticRenderFns:u};t.a=l},c27y:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("U24r"),u=n("VU/8"),l=u(null,r.a,!1,null,null,null);t.default=l.exports}});
+//# sourceMappingURL=3.b0ba1fd256aee2a5d235.js.map

dist/static/js/manifest.d4a6057c666542329f1b.js

@@ -0,0 +1,2 @@
+!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var i,u,f,s=0,l=[];s<t.length;s++)u=t[s],o[u]&&l.push(o[u][0]),o[u]=0;for(i in a)Object.prototype.hasOwnProperty.call(a,i)&&(e[i]=a[i]);for(r&&r(t,a,c);l.length;)l.shift()();if(c)for(s=0;s<c.length;s++)f=n(n.s=c[s]);return f};var t={},o={6:0};n.e=function(e){function r(){i.onerror=i.onload=null,clearTimeout(u);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var a=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=a;var c=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.charset="utf-8",i.async=!0,i.timeout=12e4,n.nc&&i.setAttribute("nonce",n.nc),i.src=n.p+"static/js/"+e+"."+{0:"a13b6e380cf2b0351445",1:"5b6be78b138f4f82e219",2:"f51279a339a43b82ef61",3:"b0ba1fd256aee2a5d235",4:"1e5687ded8537373b3d4",5:"c1b5e870a4e821397b86"}[e]+".js";var u=setTimeout(r,12e4);return i.onerror=i.onload=r,c.appendChild(i),a},n.m=e,n.c=t,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/",n.oe=function(e){throw console.error(e),e}}([]);
+//# sourceMappingURL=manifest.d4a6057c666542329f1b.js.map

flask/lib/python3.7/hmac.py

@@ -1 +0,0 @@
-/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/hmac.py

frontend/build/vue-loader.conf.js

@@ -10,6 +10,7 @@ module.exports = {
       : config.dev.cssSourceMap,
     extract: isProduction
   }),
+  esModule: true,
   transformToRequire: {
     video: 'src',
     source: 'src',

frontend/build/webpack.base.conf.js

@@ -10,7 +10,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/main.ts'
   },
   output: {
     path: config.build.assetsRoot,
@@ -20,7 +20,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.ts', '.js', '.vue', '.json'],
     alias: {
       '@': resolve('src'),
     }
@@ -28,6 +28,14 @@ module.exports = {
   module: {
     rules: [
       {
+        test: /\.ts$/,
+        exclude: /node_modules|vue\/src/,
+        loader: "ts-loader",
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
+      /*{
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
@@ -35,7 +43,7 @@ module.exports = {
         options: {
           formatter: require('eslint-friendly-formatter')
         }
-      },
+      },*/
       {
         test: /\.vue$/,
         loader: 'vue-loader',

frontend/package.json

@@ -11,55 +11,59 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
-    "axios": "^0.19.0",
+    "axios": ">=0.19.0",
+    "esnext": "^3.3.1",
+    "tsc-watch": "^2.2.1",
     "vue": "^2.6.10",
     "vue-router": "^3.0.6"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^7.1.1",
-    "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": "^2.0.1",
-    "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "autoprefixer": "^9.6.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "chalk": "^2.4.2",
+    "connect-history-api-fallback": "^1.6.0",
+    "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^3.0.0",
-    "eslint": "^3.19.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^3.0.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
+    "eslint": "^6.0.1",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
+    "express": "^4.17.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^4.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.19.1",
-    "opn": "^5.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
-    "rimraf": "^2.6.0",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
+    "opn": "^6.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "ora": "^3.4.0",
+    "portfinder": "^1.0.20",
+    "rimraf": "^2.6.3",
+    "semver": "^6.1.2",
+    "shelljs": "^0.8.3",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.2",
     "url-loader": "^2.0.1",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.35.0",
     "webpack-bundle-analyzer": ">=3.3.2",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.18.2",
-    "webpack-merge": "^4.1.0"
+    "webpack-dev-middleware": "^3.7.0",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^4.2.1"
   },
   "engines": {
     "node": ">= 4.0.0",

frontend/src/App.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'app'
 }

frontend/src/components/HelloWorld.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'HelloWorld',
   data () {

frontend/src/components/Home.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import axios from 'axios'
 export default {
   data () {

frontend/src/main.js

@@ -1,12 +1,11 @@
-import Vue from 'vue'
-import App from './App'
-import router from './router'
-
-Vue.config.productionTip = false
-
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+Vue.config.productionTip = false;
 /* eslint-disable no-new */
 new Vue({
     el: '#app',
-  router,
-  render: h => h(App)
-})
+    router: router,
+    render: function (h) { return h(App); }
+});
+//# sourceMappingURL=main.js.map

frontend/src/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAA;AACrB,OAAO,GAAG,MAAM,WAAW,CAAA;AAC3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAA;AAEhC,2BAA2B;AAC3B,IAAI,GAAG,CAAC;IACN,EAAE,EAAE,MAAM;IACV,MAAM,QAAA;IACN,MAAM,EAAE,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,GAAG,CAAC,EAAN,CAAM;CACpB,CAAC,CAAA"}

frontend/src/main.ts

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+})

frontend/src/router/index.js

@@ -1,18 +1,27 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-const routerOptions = [
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import Vue from 'vue';
+import Router from 'vue-router';
+var routerOptions = [
     { path: '/', component: 'Home' },
     { path: '/about', component: 'About' },
     { path: '*', component: 'NotFound' }
-]
-const routes = routerOptions.map(route => {
-  return {
-    ...route,
-    component: () => import(`@/components/${route.component}.vue`)
-  }
-})
-Vue.use(Router)
+];
+var routes = routerOptions.map(function (route) {
+    return __assign({}, route, { component: function () { return import("@/components/" + route.component + ".vue"); } });
+});
+Vue.use(Router);
 export default new Router({
-  routes,
+    routes: routes,
     mode: 'history'
-})
+});
+//# sourceMappingURL=index.js.map

frontend/src/router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,GAAG,MAAM,KAAK,CAAA;AACrB,OAAO,MAAM,MAAM,YAAY,CAAA;AAC/B,IAAM,aAAa,GAAG;IACpB,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE;IAChC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE;IACtC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE;CACrC,CAAA;AACD,IAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,UAAA,KAAK;IACpC,oBACK,KAAK,IACR,SAAS,EAAE,cAAM,OAAA,MAAM,CAAC,kBAAgB,KAAK,CAAC,SAAS,SAAM,CAAC,EAA7C,CAA6C,IAC/D;AACH,CAAC,CAAC,CAAA;AACF,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;AACf,eAAe,IAAI,MAAM,CAAC;IACxB,MAAM,QAAA;IACN,IAAI,EAAE,SAAS;CAChB,CAAC,CAAA"}

frontend/src/router/index.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+const routerOptions = [
+  { path: '/', component: 'Home' },
+  { path: '/about', component: 'About' },
+  { path: '*', component: 'NotFound' }
+]
+const routes = routerOptions.map(route => {
+  return {
+    ...route,
+    component: () => import(`@/components/${route.component}.vue`)
+  }
+})
+Vue.use(Router)
+export default new Router({
+  routes,
+  mode: 'history'
+})

frontend/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "lib": ["dom", "es5", "es2015"],
+      "target": "es5",
+      "module": "esNext",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "allowSyntheticDefaultImports": true
+    }
+  }

frontend/vue-shim.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+  }