Merge pull request #332 from multinet-app/best_practices

Remove use of DefinePlugin, switch to VUE_APP env vars

client/.env.default

@@ -0,0 +1,6 @@
+# Usually auto-injected
+VUE_APP_GIT_SHA=
+VUE_APP_GA_TAG=
+
+# Must contain protocol prefix (http://, https://, etc.)
+VUE_APP_MULTINET_HOST=

client/scripts/start.sh

@@ -6,7 +6,7 @@ if [ -e server.pid ]; then
     exit 1
 fi
 
-FLASK_SERVE_PORT=5000 nohup yarn serve --port 8080 >server.out &
+nohup yarn serve --port 8080 >server.out &
 echo $! >server.pid
 
 # Loop until the client is up.
@@ -15,7 +15,7 @@ count=0
 
 echo -n "waiting for client to come up"
 while [ ${started} = 0 ] && [ ${count} -lt 30 ]; do
-    headers=$(curl -s -I --max-time 0.5 http://localhost:8080/api/workspaces)
+    headers=$(curl -s -I --max-time 0.5 http://localhost:8080)
     curl_status=$?
 
     if [ ${curl_status} = 0 ]; then

client/src/api.ts

@@ -1,9 +1,6 @@
 import { multinetApi } from 'multinet';
+import { host } from '@/environment';
 
-function getApiRoot() {
-  return `${window.location.origin}/api`;
-}
-
-const api = multinetApi(getApiRoot());
+const api = multinetApi(`${host}/api`);
 
 export default api;

client/src/components/AboutDialog.vue

@@ -70,8 +70,7 @@
 import Vue from 'vue';
 
 import AExt from '@/components/AExt.vue';
-
-declare const GIT_SHA: string;
+import { gitSha as GIT_SHA } from '@/environment';
 
 export default Vue.extend({
   components: {

client/src/environment.ts

@@ -0,0 +1,3 @@
+export const host: string = process.env.VUE_APP_MULTINET_HOST || 'http://localhost:5000';
+export const gaTag: string = process.env.VUE_APP_GA_TAG || '';
+export const gitSha: string = process.env.VUE_APP_GIT_SHA || '';

client/src/vuegtag.ts

@@ -2,13 +2,12 @@ import Vue from 'vue';
 import VueGtag from 'vue-gtag';
 
 import router from '@/router';
+import { gaTag } from '@/environment';
 
-declare const GA_TAG: string;
-
-if (GA_TAG) {
+if (gaTag) {
   Vue.use(VueGtag, {
     config: {
-      id: GA_TAG,
+      id: gaTag,
     },
   }, router);
 }

client/vue.config.js

@@ -1,50 +1,9 @@
-const fs = require('fs');
-const process = require('process');
-const path = require('path');
-const dotenv = require('dotenv');
-const webpack = require('webpack');
-
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
 
-function fileToJsonString(filename) {
-  let result = null;
-  if (fs.existsSync(filename)) {
-    result = JSON.stringify(fs.readFileSync(filename).toString().trim());
-  }
-
-  return result;
-}
-
-// Read in .env file.
-const env = dotenv.parse(fs.readFileSync(path.resolve('..', '.env')));
-process.env.FLASK_SERVE_PORT = process.env.FLASK_SERVE_PORT || env.FLASK_SERVE_PORT || 5000;
-
-// Look for a git-sha file; if found, inject the value found in it into the
-// application.
-const GIT_SHA = fileToJsonString('git-sha');
-
-// Inject a value for gaTag (google analytics) if present as well.
-const GA_TAG = fileToJsonString('ga-tag');
-
 module.exports = {
   configureWebpack: {
     plugins: [
       new VuetifyLoaderPlugin(),
-      new webpack.DefinePlugin({
-        GIT_SHA,
-        GA_TAG,
-      }),
     ],
   },
-  devServer: {
-    proxy: {
-      '/api': {
-        target: `http://127.0.0.1:${process.env.FLASK_SERVE_PORT}/api`,
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': '',
-        },
-      }
-    }
-  }
 };